Sivir UI
Studio 64

Dropdown Menu

A menu of actions anchored to a button.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add dropdown-menu

Usage

Import Dropdown Menu and compose it with sub-components:

import * as DropdownMenu from '$lib/sivir/components/dropdown-menu';
import Shortcut from '$lib/sivir/components/shortcut';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item callback={handleClick}>
      Action
      <Shortcut shortcut="cmd+K" />
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Examples

Dropdown menus in common patterns and real-world use cases.

Basic menu

Grouped items

Row actions

Share menu

Sort menu

Configuration submenu

Nested choices for configuring a model, effort level, and response speed.

Dynamic width

Menus and submenus size to their longest item plus a buffer instead of hugging the trigger.

Anatomy

DropdownMenu.Root - Provides dropdown menu state.

DropdownMenu.Trigger - Opens the dropdown menu.

DropdownMenu.Label - Labels a menu section.

DropdownMenu.Item - Renders a menu action.

DropdownMenu.Content - Renders the menu surface.

DropdownMenu.Separator - Separates menu items.

DropdownMenu.Sub - Provides submenu state.

DropdownMenu.SubContent - Renders a submenu surface.

DropdownMenu.SubTrigger - Opens a submenu.