🌏 Translated with the assistance of DeepSeek and ChatGPT

Menu

Must feed.

Basic Usage

Organize the menu structure through Menu, MenuItem, MenuGroup, and Submenu components.

When MenuItem receives the href or route parameter, it will be rendered as an <a> tag or as a Vue Router RouterLink component.

WARNING

The href and route properties will be directly rendered into the <a> tag. If values such as javascript:alert(1) or malicious URLs are passed, this may lead to XSS or open redirect vulnerabilities.

• Home
• Components
  • Button
  • Input
• More
  • About
  • Github

Hide source code

Horizontal Menu

When direction is set to "horizontal", a horizontal menu is displayed. When ellipsis is true, overflowing menu items are automatically collapsed into a "..." submenu.

• ...

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Home
• ...

Hide source code

Collapsed Sidebar Mode

Use collapsed for sidebars to show compact UI.

Collapsed

• Help

Hide source code

Groups & Submenus

Combine MenuGroup and Submenu for complex nested menus.

• Undead
  • Hero
    • Death Knight
    • Lich
  • Unit
    • Crypt
      • Ghoul
      • Crypt Fiend
    • Boneyard
      • Frost Wyrm

Hide source code

Emphasized Menu

Set the Menu dark attribute to true to enable high-contrast dark mode.

• Home
• Components
  • Button
  • Input
• More
  • About
  • Github

Hide source code

Options Property

The options property of Menu is used to directly pass in options, which can be used for quick creation of simple menus. The string value of the option and the index field of the option serve as unique identifiers for the menu sub-components. It is recommended to ensure their uniqueness.

• ...

• Home
• Components
• More
• ...

• Home
• Components
  • Button
  • Input
• More
  • About
  • Github
  • Contact us

Hide source code

Controlled Menu

Control the selected menu and expanded menus by passing active and expanded. Supports v-model. If not passed or set to undefined, it operates in uncontrolled mode. In this case, default values can be set using defaultActive and defaultExpanded.

• Home
• Features
  • One
  • Two

Active: 1 | Expanded: [ "2" ]

Hide source code

Custom Slot Content

Menu, MenuItem, Submenu, and MenuGroup components provide multiple slots for customizing content. Use the default slot (MenuItem) or the label slot (Submenu, MenuGroup) to display complex menu items with a title and description, achieving a multi-line display effect.

• Home

  Back to homepage
• Components

  UI component library
  • Button

    Click to trigger an action
  • Input

    Enter text values
• Links

  Quick navigation links
  • About

    Learn more about us
  • Github

    Star us on GitHub

Hide source code

API

MenuProps

Attribute	Type	Optional	Default	Description	Version
direction	'horizontal' | 'vertical'	True	'vertical'	Orientation of the menu.	0.1.0
dark	boolean	True	false	Whether the menu uses dark mode.	0.1.0
active	number | string | symbol | null	True		Activated menu item. Supports controlled mode via v-model.	0.1.0
defaultActive	number | string | symbol | null	True		Default value for the activated menu item in uncontrolled mode.	0.1.0
expanded	(number | string | symbol)[] | null	True		Expanded submenus. Supports controlled mode via v-model.	0.1.0
defaultExpanded	(number | string | symbol)[] | null	True		Default value for expanded submenus in uncontrolled mode.	0.1.0
collapsed	boolean	True	false	Whether the vertical menu is collapsed.	0.1.0
submenuMode	'inline' | 'popover'	True	'inline'	Display mode for submenus. This value will be used if the submenu's own mode is not set.	0.1.0
submenuTrigger	'hover' | 'click'	True	'hover'	Trigger method for submenu popups. This value will be used if the submenu's own trigger is not set.	0.1.0
indent	number	True	16	Indentation for each menu level.	0.1.0
ellipsis	boolean	True	true	Whether overflowing items in a horizontal menu are collapsed into a "..." submenu.	0.1.0
options	(string | MenuOption | MenuGroupOption | SubmenuOption)[]	True		Options for creating menu sub-components, effective when the default slot is not passed.	0.1.0

MenuEvents

Event	Parameter	Description	Version
update:active	value: number | string | symbol	Callback when active updates.	0.1.0
update:expend	value: (number | string | symbol)[]		0.1.0
select	index: number | string | symbol, event: MouseEvent	Callback when a menu item is selected.	0.1.0
expandChange	value: (number | string | symbol)[], event: MouseEvent	Callback when expanded submenus change.	0.1.0
expand	index: number | string | symbol, event: MouseEvent	Callback triggered when a submenu expands.	0.1.0
fold	index: number | string | symbol, event: MouseEvent	Callback triggered when a submenu folds.	0.1.0

MenuSlots

Slot	Parameter	Description	Version
default		Child components that make up the menu.	0.1.0

MenuItemProps

Attribute	Type	Optional	Default	Description	Version
label	string	True		Text label.	0.1.0
index	number | string | symbol	False		Unique identifier. The index property of MenuItem and Submenu components must not be duplicated.	0.1.0
disabled	boolean	True	false	Whether it is disabled.	0.1.0
route	string | object	True			0.1.0
href	string	True		The href attribute of the <a> tag. When a href parameter is passed, it will render the text label as an <a> tag.	0.1.0
target	string	True		The target attribute of the <a> tag.	0.1.0

MenuItemSlots

Slot	Parameter	Description	Version
default		Text label.	0.1.0
icon		Icon.	0.1.0

SubmenuProps

Attribute	Type	Optional	Default	Description	Version
label	string	True		Text label.	0.1.0
index	number | string | symbol	False		Unique identifier. The index property of MenuItem and Submenu components must not be duplicated.	0.1.0
disabled	boolean	True	false	Whether it is disabled.	0.1.0
mode	boolean	True		Display mode for the submenu. inline renders it as an inline dropdown, popover renders it in a popup window. The inline value only takes effect within vertical menus and non-popup submenus.	0.1.0
trigger	boolean	True		Trigger method for the submenu popup.	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'defaultVisible' | 'content'> & EmitEvent<PopoverEvents>	True		Properties for the internal Popover component.	0.1.0

SubmenuSlots

Slot	Parameter	Description	Version
default		Child components that make up the menu.	0.1.0
label		Text label.	0.1.0
icon		Icon.	0.1.0

MenuGroupProps

Attribute	Type	Optional	Default	Description	Version
label	string	True		Text label.	0.1.0

MenuGroupSlots

Slot	Parameter	Description	Version
default		Child components that make up the menu.	0.1.0
label		Text label.	0.1.0

MenuOption, MenuGroupOption, SubmenuOption

export interface MenuOption extends NavigationOption {
	disabled?: boolean
	href?: string
	route?: string | object
	target?: string
	icon?: () => ValidVNodeContent
}

export interface MenuGroupOption extends NavigationOption {
	children: (string | MenuOption | MenuGroupOption | SubmenuOption)[]
	type: 'group'
}

export interface SubmenuOption extends NavigationOption {
	children: (string | MenuOption | MenuGroupOption | SubmenuOption)[]
	disabled?: boolean
	type: 'submenu'
	icon?: () => ValidVNodeContent
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}