Dropdown Menu - Stera UI

Installation

pnpm dlx stera-ui add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Icons

With Shortcuts

With Submenu

Destructive

Checkboxes

Radio Group

Title & Description

Use DropdownMenuItemContent, DropdownMenuItemTitle, and DropdownMenuItemDescription for richer item layouts.

API Reference

DropdownMenuItem

Prop	Type	Default
`variant`	`"default" \| "danger"`	`"default"`
`disabled`	`boolean`	`false`

DropdownMenuTrigger

Prop	Type	Description
`render`	`ReactElement`	Render prop for the trigger element

Subcomponents

Component	Description
`DropdownMenuLabel`	Non-interactive section heading
`DropdownMenuSeparator`	Horizontal divider
`DropdownMenuItemShortcut`	Right-aligned keyboard shortcut label
`DropdownMenuItemContent`	Column container for title + description
`DropdownMenuItemTitle`	Primary text inside `DropdownMenuItemContent`
`DropdownMenuItemDescription`	Secondary text inside `DropdownMenuItemContent`
`DropdownMenuCheckboxItem`	Checkbox-style toggle item
`DropdownMenuRadioGroup`	Radio-style selection group
`DropdownMenuRadioItem`	Individual radio item
`DropdownMenuSub`	Submenu container
`DropdownMenuSubTrigger`	Trigger that opens a submenu
`DropdownMenuSubContent`	Content panel for a submenu