dropdown — menu trigger with link list

Button that toggles a list of links. ARIA-correct (aria-haspopup, aria-expanded, role="menu"), closes on outside click + ESC, full keyboard navigation (arrow keys, Home/End, Enter to follow).

Use it for header utility menus (account, language, …), filter/sort selectors in lists, secondary actions behind a "..." trigger. Don't use it for primary navigation — that should be visible.

Install

npx czg-ui add dropdown

@import 'components/dropdown'; to app.scss, import './components/dropdown'; to app.js.

Requires base, overlay (auto-resolved by CLI).

Parameters

Usage

{include /app/components/Dropdown/dropdown.latte,
    id    => 'lang-switcher',
    label => 'CZ',
    align => 'end',
    items => [
        ['label' => 'Čeština', 'href' => '/cs'],
        ['label' => 'English', 'href' => '/en'],
    ]
}

Keyboard

• Enter / Space — toggle menu
• ↑ / ↓ — move focus among items
• Home / End — jump to first / last item
• Esc — close, return focus to trigger
• Tab — close, follow native tab order

When NOT to use

• Primary navigation — main nav links should be visible, not hidden

behind a click

• Form selects with multi-select or search — use a real <select>

or a dedicated combobox component

• More than ~7 items — promote to a full sidebar/sub-menu instead

Live preview

ui.czechgroup.cz/component/dropdown