# Dropdown Menu

Native dropdown menu using HTML popover API and CSS anchor positioning. No JavaScript required for open/close.

## Basic Example

```html
<div class="dropdown">
  <button popovertarget="menu-id">Options</button>
  <div id="menu-id" popover class="dropdown-menu">
    <a href="/profile">Profile</a>
    <a href="/settings">Settings</a>
    <hr>
    <button>Sign Out</button>
  </div>
</div>
```

## How It Works

- `popovertarget` on the button points to the menu's `id`
- `popover` attribute enables native popover behavior
- `.dropdown-menu` provides styling and positioning
- Clicking outside automatically closes the menu

## With Section Headers

```html
<div class="dropdown">
  <button popovertarget="actions-menu">Actions</button>
  <div id="actions-menu" popover class="dropdown-menu">
    <div class="dropdown-header">Account</div>
    <a href="/profile">Profile</a>
    <a href="/settings">Settings</a>
    <hr>
    <div class="dropdown-header">Danger Zone</div>
    <button>Delete Account</button>
  </div>
</div>
```

## End-Aligned (Right)

Use `.end` to align menu to the right edge of the trigger:

```html
<div class="dropdown end">
  <button popovertarget="menu">Options</button>
  <div id="menu" popover class="dropdown-menu">
    <!-- menu items -->
  </div>
</div>
```

## Disabled Items

```html
<a href="/edit" aria-disabled="true">Edit (disabled)</a>
<!-- or -->
<a href="/edit" class="disabled">Edit (disabled)</a>
```

## Menu Item Types

Links and buttons inside `.dropdown-menu` are automatically styled:

```html
<div class="dropdown-menu" popover>
  <a href="/page">Link item</a>           <!-- navigates -->
  <button>Button item</button>             <!-- triggers action -->
  <hr>                                     <!-- divider -->
  <div class="dropdown-header">Section</div> <!-- section header -->
</div>
```

## See Also

- [User menu](https://graffiti-ui.com/llms/user-menu.txt) - Avatar + dropdown pattern
- [Sidebar navigation](https://graffiti-ui.com/llms/sidebar-nav.txt) - Vertical nav with collapsible sections