Astryx Design System

Dropdown Menu@astryxdesign/core v0.0.15 · 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
import {DropdownMenu} from '@astryxdesign/core/DropdownMenu'

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.