Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Component Source

View the source code for the dropdown-menu component.

src/lib/components/ui/dropdown-menu

Installation

npx nnuikit add dropdown-menu

import * as DropdownMenu from "$lib/components/ui/dropdown-menu";

Basic Usage

Basic dropdown with groups, items, separators, and shortcuts.


<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="tertiary">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Group>
      <DropdownMenu.Label>My Account</DropdownMenu.Label>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>Profile</DropdownMenu.Item>
      <DropdownMenu.Item>Billing</DropdownMenu.Item>
      <DropdownMenu.Item>Settings</DropdownMenu.Item>
      <DropdownMenu.Item>Keyboard shortcuts</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item>Team</DropdownMenu.Item>
      <DropdownMenu.Sub>
        <DropdownMenu.SubTrigger>Invite users</DropdownMenu.SubTrigger>
        <DropdownMenu.SubContent>
          <DropdownMenu.Item>Email</DropdownMenu.Item>
          <DropdownMenu.Item>Message</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item>More...</DropdownMenu.Item>
        </DropdownMenu.SubContent>
      </DropdownMenu.Sub>
      <DropdownMenu.Item>New Team</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Log out</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Checkboxes

Use CheckboxItem for items that can be toggled.

let showStatusBar = $state(true);
let showActivityBar = $state(false);
let showPanel = $state(false);

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="tertiary">View Options</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content class="w-256">
    <DropdownMenu.Label>Appearance</DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.CheckboxItem bind:checked={showStatusBar}>
      Status Bar
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem bind:checked={showActivityBar} disabled>
      Activity Bar
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem bind:checked={showPanel}>
      Panel
    </DropdownMenu.CheckboxItem>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Radio Group

Use RadioGroup and RadioItem for mutually exclusive options.

let position = $state("bottom");

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="tertiary">Position: {position}</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content class="w-56">
    <DropdownMenu.Label>Panel Position</DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.RadioGroup bind:value={position}>
      <DropdownMenu.RadioItem value="top">Top</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="bottom">Bottom</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="right">Right</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Prevent Close

Use onSelect={(e) => e.preventDefault()} on an item to prevent the dropdown from closing when clicked.

<!-- Use onSelect with e.preventDefault() to keep the menu open -->
<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="tertiary">Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Actions</DropdownMenu.Label>
    <DropdownMenu.Separator />

    <!-- This item will NOT close the dropdown -->
    <DropdownMenu.Item onSelect={(e) => e.preventDefault()}>
      Bookmark (stays open)
    </DropdownMenu.Item>

    <!-- This item will NOT close the dropdown -->
    <DropdownMenu.Item onSelect={(e) => e.preventDefault()}>
      Add to favorites (stays open)
    </DropdownMenu.Item>

    <DropdownMenu.Separator />

    <!-- This item WILL close the dropdown (default) -->
    <DropdownMenu.Item>
      Delete (closes menu)
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

API Reference

DropdownMenu.Root

The main container for the dropdown.

Prop	Type	Default	Description
`open`	`boolean`	false	The controlled open state of the dropdown menu.
`dir`	`'ltr' \| 'rtl'`	'ltr'	The reading direction of the menu.
`preventScroll`	`boolean`	false	Whether to prevent body scrolling when menu is open.

DropdownMenu.Content

The popup content component.

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	'center'	Alignment of the content relative to the trigger.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	'bottom'	The side of the trigger the content should appear on.
`sideOffset`	`number`	4	The distance in pixels from the trigger.