Dropdown

Stable

Interactive dropdown component for menus, actions, and navigation with customizable positioning and content.

API Reference

c-dropdown (container)

Attribute	Description	Type	Default
`placement`	Controls where the dropdown menu appears relative to the trigger	string	`"bottom"`
`open`	Force dropdown to stay open (useful for demos)	boolean	`False`
`hover`	Opens the dropdown on hover instead of click	boolean	`False`

c-dropdown.menu

Inherits all attributes from the menu component. Trigger elements (buttons, divs, etc.) are placed directly inside the dropdown container with tabindex="0" for accessibility.

Attribute	Description	Type	Default
`width`	Controls dropdown menu width	string	`"52"`

placement

bottom top left right bottom-start bottom-end top-start top-end

width

52 56 60 64 72 80 96 full fit min max

Trigger focus: add tabindex="0" to the trigger element so keyboard users can open the dropdown with Enter or Space. Custom triggers (avatars, icons) without native interactivity require this attribute.

Menu items: use c-menu.item with href to create link items that are navigable by keyboard and announced correctly by screen readers.

Close on blur: the dropdown closes when focus moves outside it. Ensure focus management does not trap keyboard users inside the open menu.

Examples

Usage


<c-dropdown>
  <c-button tabindex="0">Click me</c-button>
  <c-dropdown.menu>
    <c-menu.item href="#profile">Profile</c-menu.item>
    <c-menu.item href="#settings">Settings</c-menu.item>
    <c-menu.separator />
    <c-menu.item href="#logout">Logout</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>

Basic Dropdown

Button trigger

Custom trigger

<c-dropdown>
  <c-button tabindex="0">Click me</c-button>
  <c-dropdown.menu>
    <c-menu.item href="#profile">Profile</c-menu.item>
    <c-menu.item href="#settings">Settings</c-menu.item>
    <c-menu.separator />
    <c-menu.item href="#logout">Logout</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>

Positioning

<c-dropdown placement="top">
  <c-button tabindex="0">Top Dropdown</c-button>
  <c-dropdown.menu>
    <c-menu.item>Item 1</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>

Menu Variations

Standard

Wide (width="80")

<c-dropdown>
  <c-button tabindex="0">Wide Menu</c-button>
  <c-dropdown.menu width="80">
    <c-menu.item>Action 1</c-menu.item>
    <c-menu.item>Action 2</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>

Menu Item States

<c-dropdown>
  <c-button tabindex="0">Item States</c-button>
  <c-dropdown.menu>
    <c-menu.item>Normal Item</c-menu.item>
    <c-menu.item active>Active Item</c-menu.item>
    <c-menu.item disabled>Disabled Item</c-menu.item>
    <c-menu.item href="/profile">Link Item</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>

Spacing Variations

Tight (spacing="0")

Spacious (spacing="4")

<c-dropdown>
  <c-button tabindex="0">Spacious Menu</c-button>
  <c-dropdown.menu spacing="4">
    <c-menu.item>Dashboard</c-menu.item>
    <c-menu.item>Analytics</c-menu.item>
  </c-dropdown.menu>
</c-dropdown>