Dropdown Menu

Drawer
Empty

Dropdown Menu

Usage

Template macros available

This component ships a dropdown_menu() macro for Jinja and Nunjucks.

Basecoat 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 Basecoat’s current popover/select positioning model.

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/dropdown-menu.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full Basecoat JavaScript bundle.

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

Or copy or serve the Basecoat runtime and Dropdown Menu script.

<script src="/assets/js/basecoat.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

Shortcuts

Icons

Checkboxes

Checkboxes Icons

Radio group

Radio Icons

Destructive

Avatar

RTL

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