Dropdown Menu @astryx-svelte/core v0.3.0 · DropdownMenu
Usage
A dropdown menu that displays a list of actionable items in a popup triggered by a button. Use to present action options as a next step in a process, or to offer contextual actions without cluttering the interface.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep menu items concise and action-oriented so users can scan options quickly. |
| Do | Use sections and dividers to group related actions when the menu has many items. |
| Don't | Use a DropdownMenu for navigation; use a navigation component instead. |
| Don't | Place more than 10–12 items in a single menu without grouping them into sections. |
Examples
Common configurations, variations, and states.DropdownMenu — Actions
Action menu with dividers separating safe and destructive operations. Use for row-level actions on items like documents, projects, or records.
DropdownMenu — Icon Trigger
Overflow menu triggered by an icon-only button with no chevron or label text. Use for row-level actions in tables, cards, or lists where a text button would take too much space.
DropdownMenu — Disabled
Menu with selectively disabled items based on permissions. Use when some actions require higher privileges, like admin-only operations.
DropdownMenu — Sections
Menu items organized into titled sections for easy scanning. Use when you have 6+ actions that fall into distinct categories, like Create vs Manage.
DropdownMenu — Submenu
Action menu with a nested submenu. Hover or Right arrow opens the flyout; Left arrow / Escape closes it. Use to group related destinations or secondary actions without crowding the top level.