Menu
Provides navigation menus for application structure and routing. It supports vertical and horizontal layouts, collapsible behavior, data-driven rendering, and component-level theme overrides.
Basic Usage
Use default-active to set the initially active menu item.
- Home
- Docs
- Settings
- Personal Settings
- System Settings
Basic Usage
Horizontal Menu
Set mode="horizontal" to create a horizontal navigation menu.
- Home
- Products
- Solutions
- About Us
Horizontal Menu
Collapsed Menu
Set collapse to switch a vertical menu into collapsed mode.
- Home
- Docs
- Settings
- Personal Settings
- System Settings
Collapsed Menu
Popper Customization
Set popper-effect, popper-offset, or popper-class to customize popup submenu overlays.
- Dark Popper
- Offset 12px
Popper Customization
Data Driven
Use the options prop to generate the menu from data.
- Home
- Solutions
- Enterprise
- Personal
- About Us
- Contact Us
Data Driven
External Control
Call the exposed open and close methods through a ref to control submenu state manually.
- Home
- Settings
- Personal Center
External Control
Menu Grouping
Use yh-menu-item-group to group related items.
- Navigation One
- Option 1
- Option 2
- Navigation Two
- Option 3
- Option 4
Menu Grouping
Disabled Menu
Set disabled on menu items or submenus to prevent interaction.
- Option 1
- Option 2 (Disabled)
- SubMenu (Disabled)
- Option 3-1
Disabled Menu
Custom Colors
Use background-color, text-color, and active-text-color for simple visual overrides.
- Option 1
- Option 2
- SubMenu
- Option 3-1
Custom Colors
Inverted Style
Set inverted to use the built-in dark style preset.
- Home
- Docs
- Settings
- Personal Settings
- System Settings
Inverted Style
Long Menu Content
When menu labels are long, the component can truncate and adapt them to the current layout.
- Lights out, everything changes
- This is your own quiet moment
- Listen to your inner voice
- Darkness like a giant stone
Long Menu Content
Accordion
Set unique-opened to keep only one submenu expanded at a time.
- Menu One
- Option 1-1
- Option 1-2
- Menu Two
- Option 2-1
- Menu Three
- Option 3-1
Accordion
Expand Selected Group
Use default-openeds to define which submenus are expanded on initial render.
- Default Expanded One
- Child Item
- Default Expanded Two
- Child Item
Expand Selected Group
Custom Node
Use render-label, render-icon, or render-extra for data-driven custom rendering.
- Home
- System MessagesNEW
Custom Node
Use in Nuxt
YhMenu works in Nuxt 3 after the YH-UI Nuxt module is registered. When router is enabled, use it in client-side routing flows driven by the current route.
- Home
- Docs
- About
Hint: after enabling `router`, the menu highlights items based on the current route path and the item `index`.
Use in Nuxt
SSR Notes
- Server-rendered menu structure stays aligned with the hydrated client tree.
- Router integration works with Nuxt navigation after hydration.
- Collapsed and expanded states stay stable during hydration.
API
Props
Menu
| Prop | Description | Type | Default |
|---|---|---|---|
| mode | Menu layout mode. | YhMenuMode | 'vertical' |
| default-active | Initially active menu index. | string | '' |
| default-openeds | Initially opened submenu indices. | string[] | [] |
| unique-opened | Whether only one submenu stays expanded at a time. | boolean | false |
| menu-trigger | Trigger used to open popup submenus. | YhMenuTrigger | 'hover' |
| collapse | Whether vertical mode uses collapsed navigation. | boolean | false |
| collapse-transition | Whether collapse transition is enabled. | boolean | true |
| router | Whether menu selection is driven by vue-router. | boolean | false |
| background-color | Background color override. | string | '' |
| text-color | Text color override. | string | '' |
| active-text-color | Active text color override. | string | '' |
| ellipsis | Whether long labels in horizontal mode collapse into an overflow menu. | boolean | true |
| popper-z-index | Z-index used by popup submenus. | number | 2000 |
| teleported | Whether popup submenus are teleported to body. | boolean | true |
| gap | Gap between menu items. | number | 4 |
| ellipsis-icon | Custom overflow icon used in horizontal ellipsis mode. | string | Component | '' |
| popper-offset | Popup submenu offset. | number | 6 |
| popper-effect | Popup theme style. | 'dark' | 'light' | 'light' |
| close-on-click-outside | Whether popup menus close when clicking outside. | boolean | true |
| popper-class | Custom class applied to popup submenus. | string | '' |
| popper-style | Custom inline style applied to popup submenus. | StyleValue | '' |
| show-timeout | Delay before a submenu opens. | number | 300 |
| hide-timeout | Delay before a submenu closes. | number | 300 |
| persistent | Whether popup submenu DOM stays mounted while hidden. | boolean | true |
| icon-size | Icon size when the menu is not collapsed. | number | 20 |
| indent | Indentation size added per menu level. | number | 32 |
| root-indent | First-level indentation. Falls back to indent when not provided. | number | undefined |
| expand-all | Whether all submenus are expanded by default. | boolean | false |
| render-extra | Render function used to inject extra node content for each option. | (option: YhMenuItemData) => VNodeChild | undefined |
| render-icon | Render function used to customize option icons. | (option: YhMenuItemData) => VNodeChild | undefined |
| render-label | Render function used to customize option labels. | (option: YhMenuItemData) => VNodeChild | undefined |
| responsive | Whether horizontal mode automatically collects overflowing items. | boolean | false |
| value | Current selected value, used with v-model:value. | string | null | undefined |
| options | Data-driven menu configuration. | YhMenuItemData[] | [] |
| inverted | Whether to use the built-in inverted style. | boolean | false |
| key-field | Field name used as the key in data-driven mode. | string | 'key' |
| label-field | Field name used as the label in data-driven mode. | string | 'label' |
| theme-overrides | Component-level theme overrides for YhMenu. | ComponentThemeVars | undefined |
Menu Item
| Prop | Description | Type | Default |
|---|---|---|---|
| index | Unique menu item identifier. | string | Required |
| route | Route record or path used in router mode. | string | object | '' |
| disabled | Whether the item is disabled. | boolean | false |
| label | Display text used by data-driven rendering or fallback display. | string | '' |
Menu Item Group
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Group title text. | string | '' |
Sub Menu
| Prop | Description | Type | Default |
|---|---|---|---|
| index | Unique submenu identifier. | string | Required |
| popper-class | Custom class applied to the submenu popup. | string | undefined |
| disabled | Whether the submenu is disabled. | boolean | false |
| show-timeout | Delay before the submenu opens. Overrides the parent value when provided. | number | undefined |
| hide-timeout | Delay before the submenu closes. Overrides the parent value when provided. | number | undefined |
| popper-offset | Popup offset. Overrides the parent value when provided. | number | undefined |
| label | Display text used by data-driven rendering or fallback display. | string | '' |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| update:value | Triggered when the selected value changes. | (value: string) => void |
| select | Triggered when a menu item is selected. | (index: string, indexPath: string[], item: YhMenuItemData | undefined, routeResult?: Promise<void>) => void |
| open | Triggered when a submenu opens. | (index: string, indexPath: string[]) => void |
| close | Triggered when a submenu closes. | (index: string, indexPath: string[]) => void |
Slots
Menu
| Slot Name | Description | Parameters |
|---|---|---|
| default | Menu content. | - |
Menu Item
| Slot Name | Description | Parameters |
|---|---|---|
| default | Menu item content. | - |
Menu Item Group
| Slot Name | Description | Parameters |
|---|---|---|
| title | Group title content. | - |
| default | Group content. | - |
Sub Menu
| Slot Name | Description | Parameters |
|---|---|---|
| title | Submenu title content. | - |
| default | Submenu content. | - |
Expose
| Name | Description | Type |
|---|---|---|
| open | Expands the specified submenu. | (index: string) => void |
| close | Collapses the specified submenu. | (index: string) => void |
| activeIndex | Currently active menu index. | Ref<string> |
| openedMenus | Currently opened submenu indices. | Ref<string[]> |
Menu Item Data
Data structure used by the options prop:
| Prop | Description | Type |
|---|---|---|
| key | Unique identifier, usually the same as index. | string |
| index | Alternative key field used by some data sources. | string |
| label | Display text. | string |
| icon | Icon name. | string |
| disabled | Whether the node is disabled. | boolean |
| children | Child menu options. | YhMenuItemData[] |
| group | Whether the node represents a grouped block. | boolean |
Theme Variables
YhMenu supports themeOverrides. The runtime consumes the following component variables:
| Variable | Default | Description |
|---|---|---|
--yh-menu-bg-color | var(--yh-bg-color) | Menu background color. |
--yh-menu-text-color | var(--yh-text-color-primary) | Menu text color. |
--yh-menu-active-text-color | var(--yh-color-primary) | Active item text color. |
--yh-menu-hover-bg-color | var(--yh-color-primary-light-9) | Hover background color. |
--yh-menu-active-bg-color | var(--yh-color-primary-light-9) | Active item background color. |
--yh-menu-border-color | var(--yh-border-color-light) | Menu border color. |
--yh-menu-item-height | 50px | Menu item height. |
--yh-menu-icon-size | 18px | Menu icon size. |
--yh-menu-base-padding | 20px | Base left and right padding. |
--yh-menu-indicator-width | 3px | Active indicator width. |
--yh-menu-indicator-color | var(--yh-menu-active-text-color) | Active indicator color. |
Type Exports
| Name | Description |
|---|---|
YhMenuProps | Menu component props type |
YhMenuEmits | Menu component emits type |
YhMenuSlots | Menu component slots type |
YhMenuExpose | Menu component expose type |
YhMenuMode | Menu mode union |
YhMenuTrigger | Submenu trigger union |
YhMenuItemData | Menu data type |
YhMenuItemProps | Menu item props type |
YhMenuItemGroupProps | Menu item group props type |
YhSubMenuProps | Submenu props type |
YhMenuInstance | Menu component instance type |
YhMenuItemInstance | Menu item instance type |
YhMenuItemGroupInstance | Menu item group instance type |
YhSubMenuInstance | Submenu instance type |
Inverted Mode
After enabling inverted, the menu switches to a darker visual scheme and reuses the same variables with different values.
--yh-menu-bg-color:var(--yh-bg-color-overlay-dark)--yh-menu-text-color:var(--yh-text-color-secondary)--yh-menu-hover-bg-color:var(--yh-fill-color-dark)