1. Docs
2. Components
3. Dropdown

Dropdown

The <velin-dropdown> Web Component displays a toggleable menu anchored to a trigger element, with start/end alignment, type-ahead search, and full keyboard navigation (0.7.0).

Basic Example

<velin-dropdown>
  <button class="velin-btn velin-btn--primary" slot="trigger">
    Open Menu
  </button>
  <button role="menuitem">Profile</button>
  <button role="menuitem">Settings</button>
  <button role="menuitem">Sign out</button>
</velin-dropdown>

End Alignment

<velin-dropdown align="end">
  <button slot="trigger">Align End</button>
  <button role="menuitem">Item A</button>
  <button role="menuitem">Item B</button>
</velin-dropdown>

Keyboard Navigation

Accessibility

Menu behaviour follows the menu button pattern.

• Trigger gets aria-haspopup="menu", aria-expanded, and aria-controls (menu id).
• Menu panel has role="menu"; items use role="menuitem" (assigned automatically if omitted).
• Roving tabindex with arrow keys; first item is focused when the menu opens.
• Type-ahead focuses the first matching item by visible label (WAI-ARIA menu pattern).
• Escape closes the menu and returns focus to the trigger; outside click closes as well.
• Menu items use a minimum block size of 2.5 rem; animations respect prefers-reduced-motion.

CSS Variables

JavaScript API

Attributes

Methods

Events