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