For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/en/components/dropdown-menu.md.
A3S UI
  • English
  • v0.1.0

      • Dropdown Menu

      Live preview

      Usage

      A3S UI dropdown menus are inline-positioned relative to the .dropdown-menu wrapper. This differs from shadcn/ui's portalled Base UI implementation, but keeps the markup dependency-free and matches A3S UI's current popover/select positioning model.

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, Dropdown Menu component CSS, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/dropdown-menu.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Using CDN or bundler imports? See the Installation page.

      Include JavaScript

      Copy or serve the full A3S UI JavaScript bundle.

      <script src="/assets/js/all.min.js" defer></script>

      Or copy or serve the A3S UI runtime and Dropdown Menu script.

      <script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/dropdown-menu.min.js" defer></script>

      Using CDN or bundler imports? See the Installation page.

      Add your dropdown menu HTML

      <div id="demo-dropdown-menu" class="dropdown-menu">
  <button type="button" id="demo-dropdown-menu-trigger" aria-haspopup="menu" aria-controls="demo-dropdown-menu-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
  <div id="demo-dropdown-menu-popover" data-popover aria-hidden="true" class="w-40">
    <div role="menu" id="demo-dropdown-menu-menu" aria-labelledby="demo-dropdown-menu-trigger">
      <div role="group" aria-labelledby="demo-dropdown-account">
        <div role="heading" id="demo-dropdown-account">My Account</div>
        <div role="menuitem">
          <span>Profile</span>
          <kbd>⇧⌘P</kbd>
        </div>
        <div role="menuitem">
          <span>Billing</span>
          <kbd>⌘B</kbd>
        </div>
        <div role="menuitem">
          <span>Settings</span>
          <kbd>⌘S</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">Team</div>
        <div role="menuitem">
          <span>New Team</span>
          <kbd>⌘+T</kbd>
        </div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">GitHub</div>
        <div role="menuitem">Support</div>
        <div role="menuitem" aria-disabled="true">API</div>
      </div>
      <hr role="separator" />
      <div role="group">
        <div role="menuitem">
          <span>Log out</span>
          <kbd>⇧⌘Q</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

      HTML structure

      <div class="dropdown-menu">

      Relative wrapper for the trigger and inline menu content.

      <button aria-haspopup="menu" aria-expanded="false">
      Trigger button. The script toggles aria-expanded and manages keyboard navigation.
      <div data-popover aria-hidden="true">

      Menu content popover. Set data-side="top|right|bottom|left|inline-start|inline-end" and data-align="start|center|end" to control placement.

      <div role="menu">

      Container for menu items, groups, labels, and separators.

      <div role="group" aria-labelledby="{ HEADING_ID }"> Optional
      Groups related menu items.
      <div role="heading" id="{ HEADING_ID }"> Optional
      Group heading/label.
      <div role="menuitem">
      Standard action item. Use aria-disabled="true" for disabled items.
      <div role="menuitemcheckbox" aria-checked="true">
      Checkbox-style item. Add a child with data-indicator for the checked icon.
      <div role="menuitemradio" aria-checked="true">
      Radio-style item. Add a child with data-indicator for the selected icon.
      <kbd> Optional
      Shortcut hint aligned to the inline end of the item.
      <hr role="separator"> Optional
      Separator between groups or options.

      JavaScript API

      APITypeDescription
      dropdown.open()MethodOpens the menu.
      dropdown.close()MethodCloses the menu.
      dropdown.toggle()MethodToggles the menu.
      dropdown.refresh()MethodRescans menu items after children change inside the existing role="menu" element.

      Examples

      Basic

      Live preview

      Shortcuts

      Live preview

      Icons

      Live preview

      Checkboxes

      Live preview

      Checkboxes Icons

      Live preview

      Radio group

      Live preview

      Radio Icons

      Live preview

      Destructive

      Live preview

      Avatar

      Live preview

      RTL

      Dropdown menus support document direction. Set dir="rtl" on the dropdown root or a parent element. Use logical alignment data attributes where possible.

      Live preview