Back to components

Menu

Navigation

Stablev1.0.0

Dropdown menu with keyboard navigation and checkbox support, built on Ariakit.

Preview

Installation

pnpm add @component-labs/ui

Usage

import { Menu } from "@component-labs/ui";

<Menu.Root>
  <Menu.Trigger>Open Menu</Menu.Trigger>
  <Menu.Content>
    <Menu.Item>Item 1</Menu.Item>
    <Menu.Item>Item 2</Menu.Item>
  </Menu.Content>
</Menu.Root>

Props

NameTypeDefaultDescription
variant'default' | 'primary' | 'ghost''default'Visual style variant of the menu trigger button (Menu.Trigger)
size'sm' | 'md' | 'lg''md'Size of the menu trigger button (Menu.Trigger)
showArrowbooleantrueWhether to show arrow icon on trigger (Menu.Trigger)
gutternumber8Space between trigger and menu content (Menu.Content)

Examples

Basic Menu

Simple dropdown menu with items and separator

<Menu.Root>
  <Menu.Trigger>Actions</Menu.Trigger>
  <Menu.Content>
    <Menu.Item>Edit</Menu.Item>
    <Menu.Item>Duplicate</Menu.Item>
    <Menu.Separator />
    <Menu.Item>Delete</Menu.Item>
  </Menu.Content>
</Menu.Root>

With Checkboxes

Menu with checkbox items for toggleable options

<Menu.Root>
  <Menu.Trigger>View Options</Menu.Trigger>
  <Menu.Content>
    <Menu.ItemCheckbox defaultChecked>Show toolbar</Menu.ItemCheckbox>
    <Menu.ItemCheckbox>Show sidebar</Menu.ItemCheckbox>
    <Menu.ItemCheckbox defaultChecked>Show footer</Menu.ItemCheckbox>
  </Menu.Content>
</Menu.Root>

Trigger Variants

Different trigger button styles

<div className="flex gap-2">
  <Menu.Root>
    <Menu.Trigger variant="default">Default</Menu.Trigger>
    <Menu.Content>
      <Menu.Item>Item 1</Menu.Item>
    </Menu.Content>
  </Menu.Root>

  <Menu.Root>
    <Menu.Trigger variant="primary">Primary</Menu.Trigger>
    <Menu.Content>
      <Menu.Item>Item 1</Menu.Item>
    </Menu.Content>
  </Menu.Root>

  <Menu.Root>
    <Menu.Trigger variant="ghost">Ghost</Menu.Trigger>
    <Menu.Content>
      <Menu.Item>Item 1</Menu.Item>
    </Menu.Content>
  </Menu.Root>
</div>

Without Arrow

Menu trigger without arrow indicator

<Menu.Root>
  <Menu.Trigger showArrow={false}>No Arrow</Menu.Trigger>
  <Menu.Content>
    <Menu.Item>Item 1</Menu.Item>
  </Menu.Content>
</Menu.Root>

Performance

Bundle Size

~5kB gzipped

Minified and gzipped

Dependencies

  • •@ariakit/react
  • •class-variance-authority

Accessibility

  • •Built on Ariakit's accessible Menu component
  • •Full keyboard navigation (Arrow keys, Enter, Escape)
  • •Proper ARIA attributes (aria-haspopup, aria-expanded)
  • •Focus management and trap within menu
  • •Screen reader announcements
  • •Automatic focus return to trigger on close