Dropdown Menu

A menu that appears when clicking on a trigger element, displaying a list of options.

Usage

import { DropdownMenu } from "@rhinolabs/ui"

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger>Open Menu</DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Item>Logout</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  )
}

Examples

With Submenus

Dropdown menu with nested options.

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button>Options</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>My Account</DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Billing</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
      <DropdownMenu.SubContent>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Item>Help</DropdownMenu.Item>
      </DropdownMenu.SubContent>
    </DropdownMenu.Sub>
  </DropdownMenu.Content>
</DropdownMenu>

With Checkboxes and Radio Items

Dropdown menu with selectable options.

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button>View Options</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.CheckboxItem checked>Show Toolbar</DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem>Show Statusbar</DropdownMenu.CheckboxItem>
    <DropdownMenu.Separator />
    <DropdownMenu.RadioGroup value="light">
      <DropdownMenu.Label>Theme</DropdownMenu.Label>
      <DropdownMenu.RadioItem value="light">Light</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="dark">Dark</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="system">System</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
  </DropdownMenu.Content>
</DropdownMenu>

Props

DropdownMenu

The root component that accepts all standard div attributes.

DropdownMenuItem

Prop	Type	Description
inset	boolean	Whether to inset the item content
disabled	boolean	Whether the item is disabled
onSelect	(event: Event) => void	Selection callback

DropdownMenuCheckboxItem

Prop	Type	Description
checked	boolean	The checked state
onCheckedChange	(checked: boolean) => void	Checked state change callback

Design Considerations

• Group related items logically
• Use separators to organize content
• Keep menu items concise
• Include visual indicators
• Consider mobile interactions

Accessibility

• Supports keyboard navigation
• Manages focus states
• Provides ARIA labels
• Handles screen readers
• Supports keyboard shortcuts