Dropdown Menu

A menu of actions anchored to a button.

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add dropdown-menu

Usage

Import Dropdown Menu and compose it with sub-components:

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

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item callback={handleClick}>
      Action
    </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

Inverted menu

A dark-themed dropdown with inverted colors. Use `inverted` prop on Root.