Menu

Used for site headers or sidebars, supporting mode: 'horizontal' | 'vertical', multi-level nested SubMenu fold animations, and dynamic routing pushing with vue-router.

Preview

Preview

Menu 导航菜单

• 首页
• 管理面板
  • 用户管理
  • 系统设置
• 关于我们
• 禁用项目

Installation

pnpm dlx brutx-vue@latest add menu

Usage

Vertical Mode

<script setup>
import { ref } from 'vue'
import { Menu, MenuItem, SubMenu } from 'brutx-ui-vue'

const active = ref('1')
</script>

<template>
    <Menu default-active="1" mode="vertical" @select="idx => active = idx">
        <MenuItem index="1">Home</MenuItem>
        <SubMenu index="sub-admin" title="Admin Panel">
            <MenuItem index="admin-users">Users</MenuItem>
            <MenuItem index="admin-settings">Settings</MenuItem>
        </SubMenu>
        <MenuItem index="3" disabled>Disabled Item</MenuItem>
    </Menu>
</template>

Horizontal Mode

Set mode="horizontal" to align items horizontally. Under horizontal mode, nested SubMenu lists will display as absolutely-positioned hover dropdowns instead of collapsing inline.

Opening and closing on hover use a short delay. Moving back into the submenu cancels a pending close. Escape, item selection, an outside click, disabling, or unmounting clears pending hover actions.

<script setup>
import { ref } from 'vue'
import { Menu, MenuItem, SubMenu } from 'brutx-ui-vue'

const active = ref('home')
</script>

<template>
    <Menu default-active="home" mode="horizontal" @select="idx => active = idx">
        <MenuItem index="home">Home</MenuItem>
        <SubMenu index="products" title="Products">
            <MenuItem index="product-1">Cloud Servers</MenuItem>
            <MenuItem index="product-2">Databases</MenuItem>
        </SubMenu>
        <MenuItem index="about">About</MenuItem>
    </Menu>
</template>

Routing Mode

Set router to true to auto-push routes on click. If route prop is not explicitly specified on a MenuItem, its index attribute will be used as the target path.

<template>
    <Menu router default-active="/home" mode="vertical">
        <MenuItem index="/home">Home</MenuItem>
        <MenuItem index="/users" :route="{ name: 'UsersList' }">Users</MenuItem>
        <MenuItem index="/settings">Settings</MenuItem>
    </Menu>
</template>

Subcomponents

Component	Description
Menu	Root menu component providing context state
MenuItem	Menu item component
SubMenu	Submenu component for nested and collapsible contents

API Reference

Menu

Menu — Props

Name	Type	Default	Description
mode	"vertical" | "horizontal" | undefined	"vertical"	Sets the menu item layout direction to horizontal or vertical.
Details Declared type "vertical" | "horizontal" | undefined Literal values "horizontal" "vertical" Default value details Declaration 'vertical' Source: packages/ui/src/components/menu/Menu.vue Resolved value "vertical" Source Menu.vue:9 packages/ui/src/components/menu/Menu.vue
defaultActive	string | undefined	""	Sets the index of the initially highlighted menu item and initializes the active item.
Details Declared type string | undefined Default value details Declaration '' Source: packages/ui/src/components/menu/Menu.vue Resolved value "" Source Menu.vue:11 packages/ui/src/components/menu/Menu.vue
router	boolean | undefined	false	When enabled, menu items with route navigate through vue-router.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/menu/Menu.vue Resolved value false Source Menu.vue:13 packages/ui/src/components/menu/Menu.vue
class	string | undefined	undefined	CSS classes added to the menu root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/menu/Menu.vue Resolved value undefined Source Menu.vue:15 packages/ui/src/components/menu/Menu.vue

Menu — Events

Name	Signature or type	Description
@select	[index: string]	Emits the selected menu item’s index.
Details Declared type [index: string] Source Menu.vue packages/ui/src/components/menu/Menu.vue

Menu — Slots

Name	Signature or type	Description
#default	{}	Menu content, typically MenuItem and SubMenu components.
Details Declared type {} Source Menu.vue packages/ui/src/components/menu/Menu.vue

MenuItem

MenuItem — Props

Name	Type	Default	Description
index Required	string	—	Unique item identifier used for active state and the select event; router mode also uses it to match the current route.
Details Declared type string Default value details Not declared — Source MenuItem.vue:9 packages/ui/src/components/menu/MenuItem.vue
disabled	boolean | undefined	false	Disables selection and navigation for this menu item.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/menu/MenuItem.vue Resolved value false Source MenuItem.vue:11 packages/ui/src/components/menu/MenuItem.vue
route	string | Record<string, unknown> | undefined	undefined	The path or route object to navigate to when this item is clicked in router mode.
Details Declared type string | Record<string, unknown> | undefined Default value details Declaration undefined Source: packages/ui/src/components/menu/MenuItem.vue Resolved value undefined Source MenuItem.vue:13 packages/ui/src/components/menu/MenuItem.vue
inset	boolean | undefined	false	Indents the item content to align it with items that include icons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/menu/MenuItem.vue Resolved value false Source MenuItem.vue:15 packages/ui/src/components/menu/MenuItem.vue
class	string | undefined	undefined	CSS classes added to the menu item root element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/menu/MenuItem.vue Resolved value undefined Source MenuItem.vue:17 packages/ui/src/components/menu/MenuItem.vue

MenuItem — Slots

Name	Signature or type	Description
#default	{}	The menu item label, optionally including an icon.
Details Declared type {} Source MenuItem.vue packages/ui/src/components/menu/MenuItem.vue

SubMenu

SubMenu — Props

Name	Type	Default	Description
index Required	string	—	Unique identifier for this submenu, used by menu state and nested hierarchy tracking.
Details Declared type string Default value details Not declared — Source SubMenu.vue:11 packages/ui/src/components/menu/SubMenu.vue
title	string | undefined	""	The submenu trigger title; the title slot provides the rendered content when supplied.
Details Declared type string | undefined Default value details Declaration '' Source: packages/ui/src/components/menu/SubMenu.vue Resolved value "" Source SubMenu.vue:13 packages/ui/src/components/menu/SubMenu.vue
disabled	boolean | undefined	false	Disables the submenu trigger and prevents it from opening.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/menu/SubMenu.vue Resolved value false Source SubMenu.vue:15 packages/ui/src/components/menu/SubMenu.vue
inset	boolean | undefined	false	Indents the submenu trigger content to align it with menu items that include icons.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/menu/SubMenu.vue Resolved value false Source SubMenu.vue:17 packages/ui/src/components/menu/SubMenu.vue
class	string | undefined	undefined	CSS classes added to the submenu root container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/menu/SubMenu.vue Resolved value undefined Source SubMenu.vue:19 packages/ui/src/components/menu/SubMenu.vue
triggerClass	string | undefined	undefined	CSS classes added to the submenu title trigger.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/menu/SubMenu.vue Resolved value undefined Source SubMenu.vue:21 packages/ui/src/components/menu/SubMenu.vue

SubMenu — Slots

Name	Signature or type	Description
#title	{}	Customizes the submenu trigger content and takes precedence over the title prop.
Details Declared type {} Source SubMenu.vue packages/ui/src/components/menu/SubMenu.vue
#default	{}	Submenu content, which can contain MenuItem or further nested SubMenu components.
Details Declared type {} Source SubMenu.vue packages/ui/src/components/menu/SubMenu.vue

Accessibility

• Keyboard Interaction: Supports using Enter or Space keys to select MenuItem or expand/collapse SubMenu.
• ARIA Attributes: The root component automatically sets role="menubar", and each menu item sets role="menuitem". The submenu trigger automatically manages aria-haspopup="true" and aria-expanded attributes.
• Reduced Motion: Fold animation in vertical mode respects prefers-reduced-motion settings and automatically downgrades (if applicable).