Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Usage

HTML + Javascript

This component requires Javascript.

The component is structured as such:

  • A <div class="popover"> which wraps around the entire component and holds it state (e.g. open/close).
  • A <button> that acts as the trigger to open or close the popover.
  • A <div data-popover> that holds the content of the popover.
  • Inside of the <div data-popover> is a <nav role="menu"> that contains a combination of:
    • <button role="menuitem"> for menu items.
    • <button role="menuitemcheckbox"> for menu items with checkboxes.
    • <button role="menuitemradio"> for menu items with radio buttons.
    • <hr role="separator"> to display a horizontal separator.
    • <div role="group"> to group options.
    • <span role="heading"> for group headings.

As with the Popover component, you can set up a few additional options on the <div data-popover> element:

  • data-side can be set to top, bottom, left, or right to change the side of the popover.
  • data-align can be set to start, center, or end to change the alignment of the popover.

You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).

Components with Javascript Use the CLI Individual JS file (dropdown-menu.js) 
<div class="popover" x-data="dropdownMenu" @click.away="open = false" id="dropdown-menu">
  <button type="button" aria-haspopup="menu" aria-expanded="false" x-bind="$trigger" id="dropdown-menu-trigger" aria-controls="dropdown-menu-menu" class="btn-outline">Open</button>

  <div data-popover aria-hidden="true" x-bind="$content" id="dropdown-menu-menu" class="min-w-56">
    <nav role="menu">
      <div role="group" aria-labelledby="account-options">
        <span id="account-options" role="heading">My Account</span>
        <button type="button" role="menuitem">
          Profile
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </button>
        <button type="button" role="menuitem">
          Billing
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
        </button>
        <button type="button" role="menuitem">
          Settings
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
        </button>
        <button type="button" role="menuitem">
          Keyboard shortcuts
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
        </button>
      </div>
      <hr role="separator" />
      <button type="button" role="menuitem">GitHub</button>
      <button type="button" role="menuitem">Support</button>
      <button type="button" role="menuitem" disabled>API</button>
      <hr role="separator" />
      <button type="button" role="menuitem">
        Logout
        <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
      </button>
    </nav>
  </div>
</div>

Jinja and Nunjucks

You can use the dropdown_menu() Nunjucks or Jinja macro for this component.

Use Nunjucks or Jinja macros Jinja macro Nunjucks macro 
{% call dropdown_menu(
  id="dropdown-menu",
  trigger="Open",
  trigger_attrs={"class": "btn-outline"},
  content_attrs={"class": "min-w-56"},
  register_on=["alpine:init", "htmx:afterSwap"]
) %}
<div role="group" aria-labelledby="account-options">
  <span id="account-options" role="heading">My Account</span>
  <button type="button" role="menuitem">
    Profile
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
  </button>
  <button type="button" role="menuitem">
    Billing
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
  </button>
  <button type="button" role="menuitem">
    Settings
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
  </button>
  <button type="button" role="menuitem">
    Keyboard shortcuts
    <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
  </button>
</div>
<hr role="separator">
<button type="button" role="menuitem">
  GitHub
</button>
<button type="button" role="menuitem">
  Support
</button>
<button type="button" role="menuitem" disabled>
  API
</button>
<hr role="separator">
<button type="button" role="menuitem">
  Logout
  <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
</button>
{% endcall %}

Examples

Checkboxes

Radio Group