Skip to content
Highlight

ComponentsUpdated Sep 9, 2026

Menu

A dropdown of actions with full keyboard navigation. The trigger is styled as a Button; Content wraps portal, positioner, and popup.

Import

Source: packages/ui/src/components/menu

tsx
import { Menu } from '@highlight/ui'

Basic

Items, a separator, and a destructive action last.

tsx
import { Menu } from '@highlight/ui'

export default function MenuBasic() {
  return (
    <Menu>
      <Menu.Trigger>Actions</Menu.Trigger>
      <Menu.Content>
        <Menu.Item>Rename…</Menu.Item>
        <Menu.Item>Duplicate</Menu.Item>
        <Menu.Item disabled>Move to team (soon)</Menu.Item>
        <Menu.Separator />
        <Menu.Item variant="danger">Delete</Menu.Item>
      </Menu.Content>
    </Menu>
  )
}

Checkbox and radio items

tsx
import { useState } from 'react'
import { Check, Circle } from 'lucide-react'
import { Menu } from '@highlight/ui'

export default function MenuSelection() {
  const [showTimestamps, setShowTimestamps] = useState(true)
  const [showSpeakers, setShowSpeakers] = useState(false)
  const [density, setDensity] = useState('comfortable')

  return (
    <Menu>
      <Menu.Trigger variant="secondary">View</Menu.Trigger>
      <Menu.Content>
        <Menu.Group>
          <Menu.GroupLabel>Show</Menu.GroupLabel>
          <Menu.CheckboxItem checked={showTimestamps} onCheckedChange={setShowTimestamps}>
            <Menu.CheckboxItemIndicator>
              <Check className="size-4" />
            </Menu.CheckboxItemIndicator>
            Timestamps
          </Menu.CheckboxItem>
          <Menu.CheckboxItem checked={showSpeakers} onCheckedChange={setShowSpeakers}>
            <Menu.CheckboxItemIndicator>
              <Check className="size-4" />
            </Menu.CheckboxItemIndicator>
            Speaker names
          </Menu.CheckboxItem>
        </Menu.Group>
        <Menu.Separator />
        <Menu.Group>
          <Menu.GroupLabel>Density</Menu.GroupLabel>
          <Menu.RadioGroup value={density} onValueChange={setDensity}>
            <Menu.RadioItem value="comfortable">
              <Menu.RadioItemIndicator>
                <Circle className="size-2 fill-current" />
              </Menu.RadioItemIndicator>
              Comfortable
            </Menu.RadioItem>
            <Menu.RadioItem value="compact">
              <Menu.RadioItemIndicator>
                <Circle className="size-2 fill-current" />
              </Menu.RadioItemIndicator>
              Compact
            </Menu.RadioItem>
          </Menu.RadioGroup>
        </Menu.Group>
      </Menu.Content>
    </Menu>
  )
}

Item variants

tsx
import { Menu } from '@highlight/ui'

export default function MenuItemVariants() {
  return (
    <Menu>
      <Menu.Trigger variant="secondary">Item variants</Menu.Trigger>
      <Menu.Content>
        <Menu.Item>Default</Menu.Item>
        <Menu.Item variant="primary">Primary</Menu.Item>
        <Menu.Item variant="bold">Bold</Menu.Item>
        <Menu.Item variant="success">Success</Menu.Item>
        <Menu.Item variant="danger">Danger</Menu.Item>
      </Menu.Content>
    </Menu>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Menu.Trigger
Button-styled; variant, size, shape.
Menu.Content
side, sideOffset, align, alignOffset, finalFocus.
Menu.Item / LinkItem
variant: 'default' | 'primary' | 'bold' | 'success' | 'danger'.
Menu.CheckboxItem / CheckboxItemIndicator
checked, onCheckedChange.
Menu.RadioGroup / RadioItem / RadioItemIndicator
value, onValueChange.
Menu.Group / GroupLabel / Separator
Structure.
Menu.SubmenuRoot / SubmenuTrigger
Nest a Content inside SubmenuRoot.