Dropdown Menu
A trigger-activated menu panel for grouping secondary actions like edit, duplicate, or delete.
API
All inputs and configuration options for zyra-dropdown-menu.
| Prop | Type | Default | Description |
|---|---|---|---|
align (zyra-dropdown-menu) | 'start' | 'end' | 'start' | Horizontal alignment of the panel relative to the trigger |
variant (zyra-menu-item) | 'default' | 'danger' | 'default' | Visual style of the menu item |
disabled (zyra-menu-item) | boolean | false | Disables the item — clicks are ignored |
itemClick (zyra-menu-item, output) | void | - | Emits when an enabled item is clicked; the menu also auto-closes |
Tokens
CSS custom properties zyra-dropdown-menu reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Panel background--zyra-color-background-elevated | var(--zyra-color-bg-panel) | Fill color of the dropdown panel. |
Panel border--zyra-color-border-color | var(--zyra-color-border) | Border color of the dropdown panel. |
Item text--zyra-color-foreground | var(--zyra-color-text) | Text color of a default menu item. |
Item hover background--zyra-color-primary | var(--zyra-color-accent) | Used at 8% opacity as the hover background for a default item. |
Item disabled text--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Text color of a disabled menu item. |
Danger item text--zyra-color-danger-foreground | var(--zyra-color-danger) | Text color of a danger-variant item, and (at 10% opacity) its hover background. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Panel is rendered with role="menu" and items with role="menuitem"
- Closes on outside click and on Escape
- The trigger slot accepts any focusable element, typically a button