# variant-dropdown

> Popover whose links or buttons are the values of a product option: the same as variant-popover, the preferred form.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/reference/elements/variant-dropdown  
Updated: 2026-10-21

> [!NOTE]
> [`variant-popover`](https://www.smootify.io/docs/astro/reference/elements/variant-popover) is the preferred form. `variant-dropdown` works the same in the generic build: it reads the `[popover]` it holds like `variant-popover`, with the same attributes, and removes itself only when there is no `[popover]` with an option link or button.

## Where it can go

- **Inside** [`smootify-product`](https://www.smootify.io/docs/astro/reference/elements/smootify-product).
- **Not inside** an element with `hidden` at boot: it does not mount.
- **Must contain one of** `[popover] a`, `[popover] button:not([popovertarget])`.
- **Out of place,** Smootify removes it from the page: also when its option is missing or Default Title.

## What it requires

Nothing beyond Smootify: it works on every plan.

## Attributes on the element

- **It reads** `data-option`, `data-option-name`, `avoid-option-update`.
- **Smootify writes** `role`, `aria-label` on it: do not set them yourself.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Option buttons](https://www.smootify.io/docs/astro/reference/attributes/option) | `option` | 14 |
| [Selected value](https://www.smootify.io/docs/astro/reference/attributes/selected-option) | `selected-option` | 5 |
| [Option metafield](https://www.smootify.io/docs/astro/reference/attributes/option-metafield) | `option-metafield` | 3 |

## Loading

Its code loads only on pages that have `variant-dropdown`.