#API
Menu
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
color | Theme or CSS color used for the control accents. | String | secondary | ||
items | Menu tree. Each item may nest `items`, links, icons, and dividers. | Array | |||
collapsible | Allows nested groups to collapse when they have child items. | Boolean | true | ||
collapseIcon | Default icon for collapsible group headers. | String | |||
expanded | Default expanded state for collapsible groups. | Boolean | false | ||
disabled | Disables all menu items. | Boolean | false | ||
rounded | Applies rounded corners to menu items. | Boolean | true | ||
filled | Filled item backgrounds (vs. minimal text-only look). | Boolean | true | ||
minimal | Hides item labels; icons-only layout. | Boolean | false |
emits
Name | Description |
|---|---|
expand | Emitted when a nested group expands or a linked item becomes active. |
item-click | Emitted when a menu item is clicked. |
MenuItem
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
color | Theme or CSS color used for the control accents. | String | secondary | ||
item | Item data object. Individual props override matching fields. | Object | () => {} | ||
active | Forces active styling when not using router link classes. | Boolean | false | ||
attrs | Extra HTML attributes merged onto the root element. | Object | () => {} | ||
onClick | Click handler invoked when the item is activated. | Function | |||
value | Item value identifier. | Number String | |||
to | Vue Router location; renders as a router-link when set. | String Object | |||
exact | Requires exact route match for active state. | Boolean | false | ||
href | Native link URL; renders as an anchor when set. | String | |||
target | Anchor target when `href` is set. | String | |||
label | Visible label text. | String | |||
icon | Icon name shown before the label. | String | |||
iconRight | Icon name shown after the label. | String | |||
loading | Shows a spinner in place of the trailing icon. | Boolean | false | ||
rounded | Applies rounded corners. | Boolean | true | ||
filled | Filled background style. | Boolean | true | ||
selected | Selected visual state. | Boolean | false | ||
disabled | Disables interaction. | Boolean | false | ||
minimal | Hides the label; icon-only layout. | Boolean | false | ||
prefix | Text before the label when no prefix slot is used. | String | |||
suffix | Text after the label when no suffix slot is used. | String | |||
checkbox | Shows a checkbox before the label. | Boolean | false |
slots
Name | Description |
|---|---|
default | Label content. Slot prop: item. |
prefix | Content before the label. Slot prop: item. |
suffix | Content after the label. Slot prop: item. |
emits
Name | Description |
|---|---|
active | Emitted when the item becomes active (route or `active` prop). |
click | Emitted on item click when not disabled. |
checkbox-click | Emitted when the checkbox is clicked. |