# Dropdown Menu
## Usage
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.
Import Tailwind and one full Basecoat style bundle.
```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```
Or import only the base CSS, Dropdown Menu component CSS, and one style pack.
```css
@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](/installation).
Copy or serve the full Basecoat JavaScript bundle.
```html
```
Or copy or serve the Basecoat runtime and Dropdown Menu script.
```html
```
Using CDN or bundler imports? See the [Installation page](/installation).
```html
```
### 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
| API | Type | Description |
| --- | --- | --- |
| `dropdown.open()` | Method | Opens the menu. |
| `dropdown.close()` | Method | Closes the menu. |
| `dropdown.toggle()` | Method | Toggles the menu. |
| `dropdown.refresh()` | Method | Rescans 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.