Dropdowns

A small Alpine provider manages disclosure, Escape, and arrow-key focus for native links and buttons.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<div class="dropdown" x-data="uiDropdown" @click.outside="open = false" @keydown.escape.stop="close" @keydown.arrow-down="move" @keydown.arrow-up="move">
  <button type="button" class="btn btn-secondary" x-ref="trigger" @click="toggle" :aria-expanded="open">Actions</button>
  <div class="dropdown-menu" x-ref="menu" x-show="open" x-cloak>
    <a class="dropdown-item" :href="href('/profile')" x-link>Profile</a>
    <button type="button" class="dropdown-item" @click="close">Close</button>
  </div>
</div>

Settings and behavior

• Required references are trigger and menu.
• toggle changes visibility. close returns focus to the trigger.
• Arrow keys navigate enabled links and buttons.
• Navigation closes the dropdown automatically.

Integration notes

Keep this native disclosure pattern unless you implement the full ARIA menu interaction model. Do not add Bootstrap JavaScript or initialize a second dropdown controller.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921