Dropdown

A fully accessible dropdown component with smooth animations, keyboard navigation, grouped options, and dark mode support.

Basic Usage

Add data-name to the wrapper to name the hidden input for form use.

<div class="dropdown" data-name="framework" style="width:220px">
  <button class="dropdown-btn">Select framework…</button>
  <div class="dropdown-content">
    <div class="dropdown-label">Frontend</div>
    <div class="dropdown-item" data-value="react">React</div>
    <div class="dropdown-item" data-value="vue">Vue</div>
    <div class="dropdown-item active" data-value="svelte">Svelte</div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-label">Backend</div>
    <div class="dropdown-item" data-value="express">Express</div>
    <div class="dropdown-item" data-value="fastify">Fastify</div>
  </div>
</div>

With Disabled Items

Use aria-disabled="true" for non-selectable placeholder items.

Initialisation

import { initDropdowns } from '@kerkhoff-ict/solora/dist/index.js';

// Call once after DOM is ready
initDropdowns();

// Re-run after dynamic content injection
document.addEventListener('sol:rerender', () => initDropdowns());

Keyboard Support

Key	Action
`↑` / `↓`	Navigate items
`Enter`	Select focused item
`Escape`	Close dropdown
`Tab`	Move focus out (closes dropdown)

API

Element / Attribute	Description
`.dropdown`	Wrapper element
`data-name`	Name for the hidden `<input>` (form submit)
`.dropdown-btn`	Toggle button
`.dropdown-content`	The menu panel
`.dropdown-item`	Selectable option
`.dropdown-item.active`	Pre-selected item
`.dropdown-label`	Group heading (not selectable)
`.dropdown-divider`	Horizontal rule between groups
`data-value`	Value written to the hidden input
`aria-disabled="true"`	Non-selectable / placeholder item