Dropdown menu

Usage

<script lang="ts">
  import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '$lib/components/dropdown-menu';
  import { ChevronSmallDown } from '$lib/components/icons';
  import { Button } from '$lib/components/button';
</script>

<Dropdown>
  <DropdownTrigger asChild let:builder>
    <Button builders={[builder]} trailingIcon={ChevronSmallDown}>Account</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownItem>Billing</DropdownItem>
    <DropdownItem>Support</DropdownItem>
  </DropdownContent>
</Dropdown>

Properties

The DropdownMenu component extends the Bits UI <DropdownMenu> component. Find the full list of available properties in the official Bits UI documentation.

DropdownItem

DropdownSubTrigger

DropdownCheckboxItem

DropdownRadioItem

Examples

Icon support

Use the icon property to easily add an icon to the DropdownItem component.

Description

Use the Description component inside the DropdownItem component to provide additional information about the dropdown item.

Sublabel

Use the Sublabel component inside the DropdownItem component to add a secondary label to the dropdown item.

Checkbox

Use the DropdownCheckboxItem component to create a checkbox item.

Radio

Use the DropdownRadioItem component to create a radio item.

Group

Use the DropdownGroup component to group items together in the dropdown menu.

Submenu

Use the DropdownSub component to create a submenu in the dropdown menu.