Dropdown Menu

The Dropdown Menu component provides a list of actions or options that appear when a button is clicked. It’s perfect for compact navigation, displaying options, or executing actions from a menu.

Usage

<script>
  import { 
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem
  } from "$lib/components/ui/dropdown-menu";
  import { Button } from "$lib/components/ui/button";
</script>

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Basic Dropdown

A simple dropdown menu with a few items.

With Label and Groups

A dropdown menu with labels and grouped items.

With Checkbox Items

A dropdown menu with checkbox items that can be toggled.

With Radio Items

A dropdown menu with radio items for selecting a single option from a group.

With Sub-Menu

A dropdown menu with a nested sub-menu.

Disabled Items

A dropdown menu with disabled items.

With Inset Items

A dropdown menu with inset items that have consistent indentation.

API Reference

Dropdown Menu Components

Component	Description
`DropdownMenu`	The root component that manages the dropdown menu state.
`DropdownMenuTrigger`	The button that toggles the dropdown menu.
`DropdownMenuContent`	The floating content that contains the dropdown menu items.
`DropdownMenuItem`	A selectable menu item that performs an action.
`DropdownMenuCheckboxItem`	A checkbox item that can be toggled on or off.
`DropdownMenuRadioItem`	A radio item that can be selected from a group.
`DropdownMenuLabel`	A non-interactive label to group menu items.
`DropdownMenuSeparator`	A visual separator between menu items.
`DropdownMenuShortcut`	Displays keyboard shortcut hints.
`DropdownMenuGroup`	Groups related menu items together.
`DropdownMenuSub`	Creates a submenu within a dropdown menu.
`DropdownMenuSubTrigger`	The trigger button for a submenu.
`DropdownMenuSubContent`	The content wrapper for a submenu.
`DropdownMenuRadioGroup`	A container for radio items where only one can be selected.

DropdownMenu Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the dropdown menu is open.
`onOpenChange`	`function`	`undefined`	Callback fired when the open state changes.
`modal`	`boolean`	`true`	Whether clicking outside closes the dropdown.

DropdownMenuContent Properties

Property	Type	Default	Description
`sideOffset`	`number`	`4`	Distance from the trigger.
`class`	`string`	`undefined`	Custom CSS classes.
`portalProps`	`object`	`undefined`	Props for the portal component.

DropdownMenuItem Properties

Property	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the item is disabled.
`inset`	`boolean`	`false`	Whether to add consistent indentation.
`class`	`string`	`undefined`	Custom CSS classes.

DropdownMenuCheckboxItem Properties

Property	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked.
`disabled`	`boolean`	`false`	Whether the checkbox is disabled.
`indeterminate`	`boolean`	`false`	Whether the checkbox is in indeterminate state.

DropdownMenuRadioItem Properties

Property	Type	Default	Description
`value`	`string`	Required	The value of the radio item.
`disabled`	`boolean`	`false`	Whether the radio item is disabled.

DropdownMenuRadioGroup Properties

Property	Type	Default	Description
`value`	`string`	`undefined`	The value of the selected radio item.
`onValueChange`	`function`	`undefined`	Callback fired when the selected value changes.

Implementation

The Dropdown Menu component is built on top of bits-ui primitives. Here’s a look at how the various components are styled:

<!-- DropdownMenuContent styling -->
<DropdownMenuPrimitive.Content
  class={cn(
    "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none"
  )}
/>

<!-- DropdownMenuItem styling -->
<DropdownMenuPrimitive.Item
  class={cn(
    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
    inset && "pl-8"
  )}
/>

The component is built with accessibility in mind, supporting keyboard navigation with arrow keys, proper ARIA attributes, and focus management for a seamless user experience.