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 previewHTML · CSS · JavaScript

      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 previewHTML · CSS · JavaScript

      Shortcuts

      Live previewHTML · CSS · JavaScript

      Icons

      Live previewHTML · CSS · JavaScript

      Checkboxes

      Live previewHTML · CSS · JavaScript

      Checkboxes Icons

      Live previewHTML · CSS · JavaScript

      Radio group

      Live previewHTML · CSS · JavaScript

      Radio Icons

      Live previewHTML · CSS · JavaScript

      Destructive

      Live previewHTML · CSS · JavaScript

      Avatar

      Live previewHTML · CSS · JavaScript

      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 previewHTML · CSS · JavaScript