Dropdown
A list of actions that opens below a button when it is clicked. It groups actions that do not need to take up space on the screen all the time, such as export options or row actions.
Basic usage
The trigger goes in the trigger slot and the items go in the default slot as acun:dropdown.item. The menu closes on an outside click, with the Esc key or when an item is chosen.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="white">Export</acun:button>
</acun:slot:trigger>
<acun:dropdown.item>Excel (.xlsx)</acun:dropdown.item>
<acun:dropdown.item>PDF</acun:dropdown.item>
<acun:dropdown.item>CSV</acun:dropdown.item>
</acun:dropdown>| Prop | Values |
|---|---|
trigger | Slot: the element that opens the menu |
Alignment
By default the menu is aligned to the right edge of the trigger (end), which suits buttons on the right side of the page. For buttons on the left, use align="start".
<div class="flex justify-between">
<acun:dropdown align="start">
<acun:slot:trigger><acun:button variant="white">Left-aligned</acun:button></acun:slot:trigger>
<acun:dropdown.item>By customer</acun:dropdown.item>
<acun:dropdown.item>By date</acun:dropdown.item>
</acun:dropdown>
<acun:dropdown>
<acun:slot:trigger><acun:button variant="white">Right-aligned</acun:button></acun:slot:trigger>
<acun:dropdown.item>By customer</acun:dropdown.item>
<acun:dropdown.item>By date</acun:dropdown.item>
</acun:dropdown>
</div>| Prop | Values |
|---|---|
align | start | end |
Opening upward
For triggers at the bottom of the page, open the menu upward with position="top" so it does not overflow the screen.
<acun:dropdown position="top" align="start">
<acun:slot:trigger><acun:button variant="white">Bulk action</acun:button></acun:slot:trigger>
<acun:dropdown.item>Activate</acun:dropdown.item>
<acun:dropdown.item>Deactivate</acun:dropdown.item>
<acun:dropdown.item>Archive</acun:dropdown.item>
</acun:dropdown>| Prop | Values |
|---|---|
position | bottom | top |
Full width
full-width stretches both the trigger and the menu to the width of the container. It works like a select list in narrow side panels and mobile views.
<acun:dropdown full-width>
<acun:slot:trigger><acun:button variant="white" class="w-full justify-between">Kadıköy store <acun:icon name="chevron-down" size="4" /></acun:button></acun:slot:trigger>
<acun:dropdown.item>Beşiktaş store</acun:dropdown.item>
<acun:dropdown.item>Kadıköy store</acun:dropdown.item>
<acun:dropdown.item>Üsküdar store</acun:dropdown.item>
</acun:dropdown>| Prop | Values |
|---|---|
full-width | true | false |
Items
An item with href is rendered as a link (a), an item without it as a button; you can add wire:click or x-on:click to buttons. Set external on links to another site: the link opens in a new tab, a small arrow icon appears on its right, and screen readers read the note "(opens in a new tab)" in the app language. Items can have icons, and you can put a thin line between groups. Long lists scroll after a height of 16rem.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="ghost" size="icon" aria-label="Row actions"><acun:icon name="ellipsis-vertical" /></acun:button>
</acun:slot:trigger>
<acun:dropdown.item href="#"><acun:icon name="eye" size="4" />View</acun:dropdown.item>
<acun:dropdown.item><acun:icon name="pencil-square" size="4" />Edit</acun:dropdown.item>
<acun:dropdown.item x-on:click="$dispatch('toast', { message: 'Product copied.' })"><acun:icon name="document-duplicate" size="4" />Copy</acun:dropdown.item>
<div class="my-1 border-t border-gray-100 dark:border-zinc-800"></div>
<acun:dropdown.item><acun:icon name="archive-box" size="4" />Archive</acun:dropdown.item>
<div class="my-1 border-t border-gray-100 dark:border-zinc-800"></div>
<acun:dropdown.item href="#" external><acun:icon name="question-mark-circle" size="4" />Help center</acun:dropdown.item>
</acun:dropdown>| Prop | Values |
|---|---|
href | A link when given, otherwise a button |
external | true | false (with href: new tab, arrow icon, screen reader note) |
Composable parts
Write the menu with the acun:dropdown.trigger and acun:dropdown.content parts; items are acun:dropdown.item (icon, danger), group headings are acun:dropdown.heading and separators are acun:dropdown.separator. The menu can be used with the arrow keys, Home/End and Esc. A class given to dropdown.content (e.g. w-60) is added to the menu box.
<acun:dropdown align="end">
<acun:dropdown.trigger>
<acun:button variant="white">Order actions <acun:icon name="chevron-down" size="4" /></acun:button>
</acun:dropdown.trigger>
<acun:dropdown.content class="w-60">
<acun:dropdown.heading>Order #10482</acun:dropdown.heading>
<acun:dropdown.item icon="pencil-square">Edit</acun:dropdown.item>
<acun:dropdown.item icon="user-plus">Assign an agent</acun:dropdown.item>
<acun:dropdown.item icon="arrow-down-tray" href="#">Download the invoice</acun:dropdown.item>
<acun:dropdown.separator />
<acun:dropdown.item icon="trash" danger>Delete the order</acun:dropdown.item>
</acun:dropdown.content>
</acun:dropdown>| Prop | Values |
|---|---|
acun:dropdown.trigger | The element that opens the menu |
acun:dropdown.content | Menu box |
acun:dropdown.item | href, external, icon, danger |
heading · separator | Group heading and separator |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
align | end | start · end |
position | bottom | bottom · top |
full-width | false | Trigger and menu as wide as the container |
dropdown.item: href | null | An a when given, otherwise a button (type="button") |
dropdown.item: external | false | Together with href: target="_blank" rel="noopener", an arrow icon on the right and the screen reader note "(opens in a new tab)"; no effect without href |
dropdown.item: icon · danger | null · false | Icon on the left of the item; danger marks a red (destructive, such as delete) action |
dropdown.trigger · dropdown.content | — | Composable usage: trigger and menu box |
dropdown.heading · dropdown.separator | — | Group heading and separator line |