Menu is a versatile component for creating navigation lists and hierarchical menus. It supports different sizes, orientations, and can be combined with other components to create complex navigation structures.
The Menu components include the following:
The Menu component renders a ul element with a menu class. It can be used to create vertical or horizontal navigation menus with various size options.
| Menu Props | Type | Description |
|---|---|---|
align | string | Sets the menu alignment to |
| vertical | boolean | Sets alignment to vertical. |
| horizontal | boolean | Sets alignment to horizontal. |
size | string | Sets the menu size. Options: - |
| xl | boolean | Sets size to xl. |
| lg | boolean | Sets size to lg. |
| md | boolean | Sets size to md. |
| sm | boolean | Sets size to sm. |
| xs | boolean | Sets size to xs. |
| Menu Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the menu. Typically contains |
The MenuItem component renders an li element with a menu-item class. While it's possible to use any content inside, to achieve the "list of menu items" look, place an a or span element inside for correct styling.
| MenuItem Props | Type | Description |
|---|---|---|
active | boolean | Styles the menu item to stand out. |
disabled | boolean | Styles the menu item to look disabled. Also updates the mouse cursor to show that the action is not allowed. |
| MenuItem Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the menu item. Typically contains an |
The MenuTitle component renders an li element with a menu-title class. It does not have any props.
| MenuTitle Slots | Description |
|---|---|
default | The default slot. Content to be displayed as the menu title. |
The MenuExpand component renders a details element with a dropdown menu-expand class. It can be used to create expandable submenu sections.
| MenuExpand Props | Type | Description |
|---|---|---|
open | boolean | |
hover | boolean | Opens the dropdown on mouseover. Closes on mouseout. |
| delay-enter | number | Changes the hover wait time before the Dropdown opens. default: 0. |
| delay-leave | number | Changes the mouseout wait time before the Dropdown closes. default: 300. |
close-on-click-outside | boolean | Closes the dropdown when clicking outside of the element. |
random-id | string | Allows manually specifying the internal random id. This is required for SSR. |
| MenuExpand Events | Arguments | Description |
|---|---|---|
update:open |
| MenuExpand Slots | Description |
|---|---|
default | The default slot. Must contain a |
| MenuExpand Provides | Type | Description |
|---|---|---|
menuExpandState | An object containing the expand state and control functions: - |
The MenuExpandToggle component goes inside of a MenuExpand component. It toggles the state of the expand when clicked. It renders a summary element with a menu-expand-toggle class.
| MenuExpandToggle Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the toggle element. |
A menu without additional styling.
A menu where one item is styled as menu-active.
A menu with a disabled item. The disabled prop styles the menu item to look disabled but does not prevent click events on nested elements.
Menus with different size options using the size prop or shortcut props.
Menus with responsive sizing using Tailwind's responsive classes.
A horizontal menu layout.
A menu with icons for each item.
A menu with only icons as items.
A horizontal menu with only icons as items.
A horizontal menu with an always-open submenu.
A menu with custom background and text color classes.
A vertical menu with nested submenus.
A vertical menu using MenuExpand for expandable submenus.
A vertical menu using the Dropdown component for inline dropdowns.