Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the menu text
`variant`	`'default' \| 'bordered'`	`'default'`	Menu style variant
`aria-label`	`string`	—	Accessible label for the menu
`className`	`string`	—	Additional CSS classes

Prop	Type	Default	Description
`variant`	`'default' \| 'active' \| 'danger' \| 'disabled'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the item
`icon`	`React.ReactNode`	—	Icon to display before the label
`suffix`	`React.ReactNode`	—	Content to display on the right (shortcut, badge)
`hasSubmenu`	`boolean`	`false`	Show chevron indicating submenu
`selected`	`boolean`	`false`	Show checkmark for selected state
`disabled`	`boolean`	`false`	Disable the item
`onClick`	`() => void`	—	Click handler

Usage

Import and implementation example

import { Menu, MenuItem, MenuGroup, MenuDivider } from '@/components/ui/menu'
import { User, Settings, LogOut } from 'lucide-react'

export default function Example() {
  return (
    <Menu aria-label="Settings menu">
      <MenuGroup label="Account">
        <MenuItem icon={<User />} onClick={() => {}}>
          Profile
        </MenuItem>
        <MenuItem icon={<Settings />} onClick={() => {}}>
          Settings
        </MenuItem>
      </MenuGroup>
      <MenuDivider />
      <MenuItem icon={<LogOut />} variant="danger" onClick={() => {}}>
        Log out
      </MenuItem>
    </Menu>
  )
}

Features

Built-in functionality

Icon support: Leading icons for visual context
Suffix content: Keyboard shortcuts, badges, or custom content
Submenu indicator: Chevron for items with submenus
Selection state: Checkmark for selected/active items
Groups & headers: Organize items with labeled groups
Dividers: Visual separation between sections
Multiple variants: Default, active, danger, and disabled states
3 sizes: Small, medium, and large
Dark mode: Full dark mode support

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

role="menu" on containerrole="menuitem" on itemsrole="separator" on dividersrole="group" on grouped sectionsaria-disabled on disabled itemsaria-label for menu description

Keyboard Navigation

Key	Action
`Tab`	Move focus between menu items
`Enter / Space`	Activate focused item

Notes

All items are keyboard accessible
Focus is visible on interactive elements
Disabled items are not focusable
Proper ARIA roles for screen readers

Related Components

Dropdown Menu Context Menu Navigation Menu Vertical Sidebar

Menu

Preview

Basic Menu

With Icons

With Suffix

Submenu Indicator

Selection State

Grouped Items

Item Variants

Sizes

Bordered Variant

Menu Props

MenuItem Props