# Dropdown
Source: https://iriscss.com/documentation/components/dropdown/
A popover list of links or choices, opened by a button. No JavaScript.
```html
```
Give the list `popover` and `.dropdown`, and point the button's `popovertarget` at its `id`. Put the list right after the button, which then shows a chevron that turns while the menu is open. Clicking outside or pressing `Esc` closes it, and the browser tells screen readers whether it is open. `aria-current` marks the selected link.
Where the browser supports anchor positioning, the menu opens below the button, at least as wide as it, and flips above it near the bottom of the screen. It sits in the top layer, so no container clips it. Browsers without anchor positioning center it like any [popover](https://iriscss.com/documentation/elements/popover/index.html.md).
## Button
The button keeps every [button](https://iriscss.com/documentation/elements/button/index.html.md) color, style and size.
```html
```
## Select
`.select` draws the button as a [select](https://iriscss.com/documentation/form/controls/index.html.md), for a menu of choices. List items can hold labels with checkboxes or radios.
```html
```
## In a form
Inside a `label` the select button sits under the label text like any control. `aria-invalid` on it shows a [validation](https://iriscss.com/documentation/form/validation/index.html.md) state.
```html
```
## In a nav
Inside `nav` a button without a class looks like a link. See [nav](https://iriscss.com/documentation/components/nav/index.html.md).
```html
```
## Sizes and styles
A select button takes size classes, `.rounded`, `.square` and `.outlined`.
```html