1. Docs
2. Erste Schritte
3. Dropdown

Dropdown 1.2.0

The <velin-dropdown> Web Komponente displays a toggleable Menü anchored to a trigger element, with start/end alignment, type-ahead search, and full Tastatur navigation (0.7.0). English: Dropdown

Wann verwenden

• Menüs of actions or Links triggered from a Button with the documented dropdown markup.
• Secondary actions that should stay collapsed until the Nutzer opens them.

Wann nicht verwenden

• Form field typeahead / filterable options — use Combobox.
• App-wide command search — use Command palette.

Einfaches Beispiel

<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>

Ausrichtung am Ende

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

Tastaturnavigation

Barrierefreiheit

Menü behaviour follows the Menü Button pattern.

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

CSS-Variablen

JavaScript-API

Attribut

Methoden

Ereignisse

Verwandt

• Combobox
• Command palette
• Menüleiste