All components (204)

Dropdown

Layers · Dropdown

What it is and when to use it

A floating panel attached to its button, with whatever you want inside: advanced filters, a summary, a short form. It fills the gap left by ActionMenu (a list of actions) and Dialog (something that blocks the way): this is neither a list nor does it cover the page with a veil.

When to use it

Advanced filters in a toolbar, with "Apply" in the footer.
A summary you consult without leaving the screen: the cart, the user.
children and footer can be a function that receives close, for a button that applies and closes.
openOn="contextmenu" to open it with a right click on the trigger; open and onOpenChange to open it from outside.

When not to

A list of actions: ActionMenu.
A decision that cannot be ignored: Dialog.
A sentence of help: Tooltip.
The "are you sure?" of a button: ConfirmAction.

Keyboard: the trigger is pressed with Enter or Space; when it opens, focus enters the panel and Tab stays inside it. Escape or a click outside closes it and focus returns to the trigger.

Accessibility: the panel is a native <dialog> placed next to its trigger, with the title as its name, which is what is announced when it opens; with hiddenTitle it stops being visible but is still announced. While it is open, the rest of the page is inert, even though it is not darkened. trigger has to be focusable: a button.

Fine-tuning: no variables of its own. It is adjusted with the amset-dropdown__* classes and the one shared by all floating elements, amset-floating; the width, with width; the position, with placement and offset.

What it looks like

<Dropdown
  title="Advanced filters"
  trigger={<Button startIcon={<FilterIcon />}>Filters</Button>}
  width="18rem"
  footer={(cerrar) => <Button size="sm" variant="solid" onPress={cerrar}>Apply</Button>}
>
  <Checkbox defaultSelected>Only what's in stock</Checkbox>
  <Checkbox>Gold pieces only</Checkbox>
</Dropdown>

Props

Import it with import { Dropdown } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode \| ((close: () => void) => ReactNode)`	—
`title`required	`string`	Title of the panel. Required: it is what is announced on opening it, even if it is asked not to be shown.
`trigger`required	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	What opens the panel. It has to be focusable: a button.
`className`	`string`	Merged with the library classes; it does not replace them.
`footer`	`ReactNode \| ((close: () => void) => ReactNode)`	—
`hiddenTitle`	`boolean`	—
`offset`	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`openOn`	`DropdownOpenOn`	What opens it. By default `'press'`. With `'contextmenu'` it is the right click (or the menu key) and the browser's menu does not appear; the panel is placed next to the element, not under the cursor. The name is the MODE: the ELEMENT that opens it is `trigger`.
`placement`	`Placement`	—
`width`	`string`	Width of the panel. By default it adjusts to the content.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: