## types of dropdown

Nav Dropdown

- `aria-expanded` and `aria-controls`
- `hidden` attribute on the content
- css `[hidden] { display: none; }` for compatibility
- optional `aria-haspopup` indicates that focus will be moved to the child

```html
<div class="nav-dropdown">
  <button aria-expanded="false" aria-controls="some-uid">
    Menu <span aria-hidden="true">↓</span>
  </button>
  <ul role="list" id="some-uid" hidden>
    <li role="listitem"><a href="/">Home</a></li>
    <li role="listitem"><a href="/about">About</a></li>
    <li role="listitem"><a href="/shop">Shop</a></li>
    <li role="listitem"><a href="/contact">Contact</a></li>
  </ul>
</div>
```

App Dropdown

- `aria-haspopup`: indicates that focus will be moved to the child
- `role=menu`, `role=menuitem`: these are for apps
- content part can be hidden/unmounted until activation...

```html
<div class="app-dropdown">
  <button aria-haspopup="true" aria-expanded="false">
    Difficulty <span aria-hidden="true">&#x25be;</span>
  </button>
  <div role="menu">
    <button role="menuitem">Easy</button>
    <button role="menuitem">Medium</button>
    <button role="menuitem">Incredibly Hard</button>
  </div>
</div>
```