mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
511 lines
28 KiB
Plaintext
511 lines
28 KiB
Plaintext
# Dropdown Menu
|
|
|
|
<Preview>
|
|
<div id="demo-dropdown-menu" class="dropdown-menu">
|
|
<button type="button" id="demo-dropdown-menu-trigger" aria-haspopup="menu" aria-controls="demo-dropdown-menu-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="demo-dropdown-menu-popover" data-popover aria-hidden="true" class="w-40">
|
|
<div role="menu" id="demo-dropdown-menu-menu" aria-labelledby="demo-dropdown-menu-trigger">
|
|
<div role="group" aria-labelledby="demo-dropdown-account">
|
|
<div role="heading" id="demo-dropdown-account">My Account</div>
|
|
<div role="menuitem">
|
|
<span>Profile</span>
|
|
<kbd>⇧⌘P</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Billing</span>
|
|
<kbd>⌘B</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Settings</span>
|
|
<kbd>⌘S</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">Team</div>
|
|
<div role="menuitem">
|
|
<span>New Team</span>
|
|
<kbd>⌘+T</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">GitHub</div>
|
|
<div role="menuitem">Support</div>
|
|
<div role="menuitem" aria-disabled="true">API</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">
|
|
<span>Log out</span>
|
|
<kbd>⇧⌘Q</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Callout title="Template macros available" icon="code" action={{ label: "More", href: "/templates#dropdown_menu" }}>
|
|
This component ships a `dropdown_menu()` macro for Jinja and Nunjucks.
|
|
</Callout>
|
|
|
|
Basecoat dropdown menus are inline-positioned relative to the `.dropdown-menu` wrapper. This differs from shadcn/ui's portalled Base UI implementation, but keeps the markup dependency-free and matches Basecoat's current popover/select positioning model.
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, Dropdown Menu component CSS, and one style pack.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/base.css";
|
|
@import "basecoat-css/components/dropdown-menu.css";
|
|
@import "basecoat-css/styles/vega.css";
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Include JavaScript">
|
|
|
|
Copy or serve the full Basecoat JavaScript bundle.
|
|
|
|
```html
|
|
<script src="/assets/js/all.min.js" defer></script>
|
|
```
|
|
|
|
Or copy or serve the Basecoat runtime and Dropdown Menu script.
|
|
|
|
```html
|
|
<script src="/assets/js/basecoat.min.js" defer></script>
|
|
<script src="/assets/js/dropdown-menu.min.js" defer></script>
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Add your dropdown menu HTML">
|
|
|
|
```html
|
|
<div id="demo-dropdown-menu" class="dropdown-menu">
|
|
<button type="button" id="demo-dropdown-menu-trigger" aria-haspopup="menu" aria-controls="demo-dropdown-menu-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="demo-dropdown-menu-popover" data-popover aria-hidden="true" class="w-40">
|
|
<div role="menu" id="demo-dropdown-menu-menu" aria-labelledby="demo-dropdown-menu-trigger">
|
|
<div role="group" aria-labelledby="demo-dropdown-account">
|
|
<div role="heading" id="demo-dropdown-account">My Account</div>
|
|
<div role="menuitem">
|
|
<span>Profile</span>
|
|
<kbd>⇧⌘P</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Billing</span>
|
|
<kbd>⌘B</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Settings</span>
|
|
<kbd>⌘S</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">Team</div>
|
|
<div role="menuitem">
|
|
<span>New Team</span>
|
|
<kbd>⌘+T</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">GitHub</div>
|
|
<div role="menuitem">Support</div>
|
|
<div role="menuitem" aria-disabled="true">API</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem">
|
|
<span>Log out</span>
|
|
<kbd>⇧⌘Q</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
</Step>
|
|
</Steps>
|
|
|
|
### HTML structure
|
|
|
|
<dl>
|
|
<dt><code><div class="dropdown-menu"></code></dt>
|
|
<dd>
|
|
Relative wrapper for the trigger and inline menu content.
|
|
<dl>
|
|
<dt><code><button aria-haspopup="menu" aria-expanded="false"></code></dt>
|
|
<dd>Trigger button. The script toggles <code>aria-expanded</code> and manages keyboard navigation.</dd>
|
|
<dt><code><div data-popover aria-hidden="true"></code></dt>
|
|
<dd>
|
|
Menu content popover. Set <code>data-side="top|right|bottom|left|inline-start|inline-end"</code> and <code>data-align="start|center|end"</code> to control placement.
|
|
<dl>
|
|
<dt><code><div role="menu"></code></dt>
|
|
<dd>
|
|
Container for menu items, groups, labels, and separators.
|
|
<dl>
|
|
<dt><code><div role="group" aria-labelledby="{ HEADING_ID }"></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
|
<dd>Groups related menu items.</dd>
|
|
<dt><code><div role="heading" id="{ HEADING_ID }"></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
|
<dd>Group heading/label.</dd>
|
|
<dt><code><div role="menuitem"></code></dt>
|
|
<dd>Standard action item. Use <code>aria-disabled="true"</code> for disabled items.</dd>
|
|
<dt><code><div role="menuitemcheckbox" aria-checked="true"></code></dt>
|
|
<dd>Checkbox-style item. Add a child with <code>data-indicator</code> for the checked icon.</dd>
|
|
<dt><code><div role="menuitemradio" aria-checked="true"></code></dt>
|
|
<dd>Radio-style item. Add a child with <code>data-indicator</code> for the selected icon.</dd>
|
|
<dt><code><kbd></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
|
<dd>Shortcut hint aligned to the inline end of the item.</dd>
|
|
<dt><code><hr role="separator"></code> <span class="badge" data-variant="secondary">Optional</span></dt>
|
|
<dd>Separator between groups or options.</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
|
|
### JavaScript API
|
|
|
|
| API | Type | Description |
|
|
| --- | --- | --- |
|
|
| `dropdown.open()` | Method | Opens the menu. |
|
|
| `dropdown.close()` | Method | Closes the menu. |
|
|
| `dropdown.toggle()` | Method | Toggles the menu. |
|
|
| `dropdown.refresh()` | Method | Rescans menu items after children change inside the existing `role="menu"` element. |
|
|
|
|
## Examples
|
|
|
|
### Basic
|
|
|
|
<Preview>
|
|
<div id="dropdown-basic" class="dropdown-menu">
|
|
<button type="button" id="dropdown-basic-trigger" aria-haspopup="menu" aria-controls="dropdown-basic-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="dropdown-basic-popover" data-popover aria-hidden="true" class="min-w-32">
|
|
<div role="menu" id="dropdown-basic-menu" aria-labelledby="dropdown-basic-trigger">
|
|
<div role="group" aria-labelledby="dropdown-basic-account">
|
|
<div role="heading" id="dropdown-basic-account">My Account</div>
|
|
<div role="menuitem">Profile</div>
|
|
<div role="menuitem">Billing</div>
|
|
<div role="menuitem">Settings</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="menuitem">GitHub</div>
|
|
<div role="menuitem">Support</div>
|
|
<div role="menuitem" aria-disabled="true">API</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Shortcuts
|
|
|
|
<Preview>
|
|
<div id="dropdown-shortcuts" class="dropdown-menu">
|
|
<button type="button" id="dropdown-shortcuts-trigger" aria-haspopup="menu" aria-controls="dropdown-shortcuts-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="dropdown-shortcuts-popover" data-popover aria-hidden="true" class="min-w-46">
|
|
<div role="menu" id="dropdown-shortcuts-menu" aria-labelledby="dropdown-shortcuts-trigger">
|
|
<div role="group" aria-labelledby="dropdown-shortcuts-account">
|
|
<div role="heading" id="dropdown-shortcuts-account">My Account</div>
|
|
<div role="menuitem">
|
|
<span>Profile</span>
|
|
<kbd>⇧⌘P</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Billing</span>
|
|
<kbd>⌘B</kbd>
|
|
</div>
|
|
<div role="menuitem">
|
|
<span>Settings</span>
|
|
<kbd>⌘S</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="menuitem">
|
|
<span>Log out</span>
|
|
<kbd>⇧⌘Q</kbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Icons
|
|
|
|
<Preview>
|
|
<div id="dropdown-icons" class="dropdown-menu">
|
|
<button type="button" id="dropdown-icons-trigger" aria-haspopup="menu" aria-controls="dropdown-icons-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="dropdown-icons-popover" data-popover aria-hidden="true" class="min-w-32">
|
|
<div role="menu" id="dropdown-icons-menu" aria-labelledby="dropdown-icons-trigger">
|
|
<div role="menuitem"><svg class="lucide lucide-user" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
|
|
Profile
|
|
</div>
|
|
<div role="menuitem"><svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
|
Billing
|
|
</div>
|
|
<div role="menuitem"><svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
|
Settings
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="menuitem" data-variant="destructive"><svg class="lucide lucide-log-out" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5" /><path d="M21 12H9" /><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /></svg>
|
|
Log out
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Checkboxes
|
|
|
|
<Preview>
|
|
<div id="dropdown-checkboxes" class="dropdown-menu">
|
|
<button type="button" id="dropdown-checkboxes-trigger" aria-haspopup="menu" aria-controls="dropdown-checkboxes-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="dropdown-checkboxes-popover" data-popover aria-hidden="true" class="w-40">
|
|
<div role="menu" id="dropdown-checkboxes-menu" aria-labelledby="dropdown-checkboxes-trigger">
|
|
<div role="group" aria-labelledby="dropdown-checkboxes-label">
|
|
<div role="heading" id="dropdown-checkboxes-label">Appearance</div>
|
|
<div role="menuitemcheckbox" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Status Bar
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="false" aria-disabled="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Activity Bar
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Panel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Checkboxes Icons
|
|
|
|
<Preview>
|
|
<div id="dropdown-checkboxes-icons" class="dropdown-menu">
|
|
<button type="button" id="dropdown-checkboxes-icons-trigger" aria-haspopup="menu" aria-controls="dropdown-checkboxes-icons-menu" aria-expanded="false" class="btn" data-variant="outline">Notifications</button>
|
|
<div id="dropdown-checkboxes-icons-popover" data-popover aria-hidden="true" class="w-48">
|
|
<div role="menu" id="dropdown-checkboxes-icons-menu" aria-labelledby="dropdown-checkboxes-icons-trigger">
|
|
<div role="group" aria-labelledby="dropdown-checkboxes-icons-label">
|
|
<div role="heading" id="dropdown-checkboxes-icons-label">Notification Preferences</div>
|
|
<div role="menuitemcheckbox" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /><rect x="2" y="4" width="20" height="16" rx="2" /></svg>
|
|
Email notifications
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-message-square" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
|
|
SMS notifications
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-bell" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
|
|
Push notifications
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Radio group
|
|
|
|
<Preview>
|
|
<div id="dropdown-radio-group" class="dropdown-menu">
|
|
<button type="button" id="dropdown-radio-group-trigger" aria-haspopup="menu" aria-controls="dropdown-radio-group-menu" aria-expanded="false" class="btn" data-variant="outline">Open</button>
|
|
<div id="dropdown-radio-group-popover" data-popover aria-hidden="true" class="min-w-32">
|
|
<div role="menu" id="dropdown-radio-group-menu" aria-labelledby="dropdown-radio-group-trigger">
|
|
<div role="group" aria-labelledby="dropdown-radio-label">
|
|
<div role="heading" id="dropdown-radio-label">Panel Position</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Top
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Bottom
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
Right
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Radio Icons
|
|
|
|
<Preview>
|
|
<div id="dropdown-radio-icons" class="dropdown-menu">
|
|
<button type="button" id="dropdown-radio-icons-trigger" aria-haspopup="menu" aria-controls="dropdown-radio-icons-menu" aria-expanded="false" class="btn" data-variant="outline">Payment Method</button>
|
|
<div id="dropdown-radio-icons-popover" data-popover aria-hidden="true" class="min-w-56">
|
|
<div role="menu" id="dropdown-radio-icons-menu" aria-labelledby="dropdown-radio-icons-trigger">
|
|
<div role="group" aria-labelledby="dropdown-radio-icons-label">
|
|
<div role="heading" id="dropdown-radio-icons-label">Select Payment Method</div>
|
|
<div role="menuitemradio" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
|
Credit Card
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-wallet" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" /><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" /></svg>
|
|
PayPal
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
<svg class="lucide lucide-building-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" /><path d="M6 12H4a2 2 0 0 0-2 2v8h20v-8a2 2 0 0 0-2-2h-2" /><path d="M10 6h4" /><path d="M10 10h4" /><path d="M10 14h4" /><path d="M10 18h4" /></svg>
|
|
Bank Transfer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Destructive
|
|
|
|
<Preview>
|
|
<div id="dropdown-destructive" class="dropdown-menu">
|
|
<button type="button" id="dropdown-destructive-trigger" aria-haspopup="menu" aria-controls="dropdown-destructive-menu" aria-expanded="false" class="btn" data-variant="outline">Actions</button>
|
|
<div id="dropdown-destructive-popover" data-popover aria-hidden="true" class="min-w-32">
|
|
<div role="menu" id="dropdown-destructive-menu" aria-labelledby="dropdown-destructive-trigger">
|
|
<div role="group">
|
|
<div role="menuitem"><svg class="lucide lucide-pencil" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" /></svg>
|
|
Edit
|
|
</div>
|
|
<div role="menuitem"><svg class="lucide lucide-share" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><polyline points="16 6 12 2 8 6" /><line x1="12" x2="12" y1="2" y2="15" /></svg>
|
|
Share
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem" data-variant="destructive"><svg class="lucide lucide-trash" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /></svg>
|
|
Delete
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Avatar
|
|
|
|
<Preview>
|
|
<div id="dropdown-avatar" class="dropdown-menu">
|
|
<button type="button" id="dropdown-avatar-trigger" aria-haspopup="menu" aria-controls="dropdown-avatar-menu" aria-expanded="false" class="btn rounded-full" data-variant="ghost" data-size="icon">
|
|
<span class="avatar">
|
|
<img src="https://github.com/shadcn.png" alt="shadcn" />
|
|
<span>LR</span>
|
|
</span>
|
|
</button>
|
|
<div id="dropdown-avatar-popover" data-popover aria-hidden="true" data-align="end">
|
|
<div role="menu" id="dropdown-avatar-menu" aria-labelledby="dropdown-avatar-trigger">
|
|
<div role="group">
|
|
<div role="menuitem"><svg class="lucide lucide-badge-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>
|
|
Account
|
|
</div>
|
|
<div role="menuitem"><svg class="lucide lucide-credit-card" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></svg>
|
|
Billing
|
|
</div>
|
|
<div role="menuitem"><svg class="lucide lucide-bell" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
|
|
Notifications
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="menuitem"><svg class="lucide lucide-log-out" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5" /><path d="M21 12H9" /><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /></svg>
|
|
Sign Out
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
Dropdown menus support document direction. Set `dir="rtl"` on the dropdown root or a parent element. Use logical alignment data attributes where possible.
|
|
|
|
<Preview>
|
|
<div dir="rtl">
|
|
<div id="dropdown-rtl" class="dropdown-menu">
|
|
<button type="button" id="dropdown-rtl-trigger" aria-haspopup="menu" aria-controls="dropdown-rtl-menu" aria-expanded="false" class="btn" data-variant="outline">افتح القائمة</button>
|
|
<div id="dropdown-rtl-popover" data-popover aria-hidden="true" class="w-36" data-align="end">
|
|
<div role="menu" id="dropdown-rtl-menu" aria-labelledby="dropdown-rtl-trigger">
|
|
<div role="group" aria-labelledby="dropdown-rtl-team">
|
|
<div role="heading" id="dropdown-rtl-team">الفريق</div>
|
|
<div role="menuitem">الفريق</div>
|
|
<div role="menuitem">
|
|
<span>فريق جديد</span>
|
|
<kbd>⌘+T</kbd>
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group" aria-labelledby="dropdown-rtl-view">
|
|
<div role="heading" id="dropdown-rtl-view">عرض</div>
|
|
<div role="menuitemcheckbox" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
شريط الحالة
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
شريط النشاط
|
|
</div>
|
|
<div role="menuitemcheckbox" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
اللوحة
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group" aria-labelledby="dropdown-rtl-position">
|
|
<div role="heading" id="dropdown-rtl-position">الموضع</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
أعلى
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="true">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
أسفل
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
يمين
|
|
</div>
|
|
<div role="menuitemradio" aria-checked="false">
|
|
<span data-indicator><svg class="lucide lucide-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg></span>
|
|
يسار
|
|
</div>
|
|
</div>
|
|
<hr role="separator" />
|
|
<div role="group">
|
|
<div role="menuitem" data-variant="destructive">تسجيل الخروج</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|