dropdown
A menu behind a button. With no label it's a row-actions icon button.
Example
Laravel
<x-admin::toolbar>
<x-admin::dropdown label="Actions" icon="settings">
<x-admin::dropdown-item href="#" icon="edit">Edit</x-admin::dropdown-item>
<x-admin::dropdown-item href="#" icon="copy">Duplicate</x-admin::dropdown-item>
<x-admin::dropdown-separator />
<x-admin::dropdown-item icon="trash" destructive>Delete</x-admin::dropdown-item>
</x-admin::dropdown>
<x-admin::dropdown label="Rina Halim" icon="user">
<x-admin::dropdown-header>Signed in as rina@example.com</x-admin::dropdown-header>
<x-admin::dropdown-separator />
<x-admin::dropdown-item href="#" icon="user">Profile</x-admin::dropdown-item>
<x-admin::dropdown-item href="#" icon="logout">Sign out</x-admin::dropdown-item>
</x-admin::dropdown>
<x-admin::dropdown sr-label="Row actions">
<x-admin::dropdown-item href="#" icon="edit">Edit rule</x-admin::dropdown-item>
</x-admin::dropdown>
</x-admin::toolbar>Props
| Prop | Required | Default | Options |
|---|---|---|---|
label | null | ||
icon | null | ||
sr-label | null |
Other attributes, such as wire:model or data-*, pass through to the element.
Other stacks
React and Vue: import { Dropdown } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.
HTML, for any stack
<div class="adm-toolbar" role="toolbar"><details class="adm-dropdown">
<summary class="adm-btn adm-btn--secondary adm-dropdown__trigger--icon"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/></svg><span class="adm-dropdown__label">Actions</span><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
<div class="adm-menu"><a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>Edit</a>
<a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg>Duplicate</a>
<div class="adm-menu__sep" role="separator"></div>
<button type="button" class="adm-menu__item adm-menu__item--destructive"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg>Delete</button></div>
</details>
<details class="adm-dropdown">
<summary class="adm-btn adm-btn--secondary adm-dropdown__trigger--icon"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="adm-dropdown__label">Rina Halim</span><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
<div class="adm-menu"><div class="adm-menu__header" role="presentation">Signed in as rina@example.com</div>
<div class="adm-menu__sep" role="separator"></div>
<a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>Profile</a>
<a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4M16 17l5-5-5-5M21 12H9"/></svg>Sign out</a></div>
</details>
<details class="adm-dropdown">
<summary class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" aria-label="Row actions"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></svg></summary>
<div class="adm-menu"><a href="#" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>Edit rule</a></div>
</details></div>