On this page
Proposed CSC Standards · 0.1.0
Dropdown menus
A menu of actions opened from a button.
Hide secondary actions until the person asks for them.
What this describes
When to use
- A row has more than two secondary actions.
- A profile menu.
When not to use
- The primary action. That stays a visible Button.
- Navigation to main sections. Use Sidebar or TopNav.
Allowed variants
Actions
Secondary row actions.
- Hierarchy
- Menu.
- Use in
- Tables and cards.
- Restriction
- Primary action stays outside.
- Accessibility
- Named trigger.
- Responsive
- Stays in the viewport.
Profile
Account actions.
- Hierarchy
- Menu.
- Use in
- The header.
- Restriction
- Not the main navigation.
- Accessibility
- Trigger names the account.
- Responsive
- Opens inward on a narrow header.
Grouped
Actions under labels.
- Hierarchy
- Grouped menu.
- Use in
- Many commands.
- Restriction
- Group labels are text.
- Accessibility
- Items remain menu items.
- Responsive
- The group scrolls inside the menu if needed.
Mandatory rules
Open the menu from a button with a name
The trigger is a button with an accessible name and aria-expanded.
Implementation detail
The APG menu button pattern. DropdownMenu is built on Radix DropdownMenu.
The trigger is a button with an accessible name and aria-expanded. Do not use a div trigger.
Check: The trigger name is specific, such as Actions, and aria-expanded toggles.
Close on Escape and return focus
Escape closes the menu and focus returns to the trigger.
Implementation detail
That is part of the menu-button pattern and Radix implements it.
Do not replace the component with a custom popover that leaves focus inside a detached node.
Check: Escape closes the menu and the trigger is focused.
Keep the menu on screen
At 320px the menu aligns inside the viewport.
Implementation detail
Proposed CSC Standard. A menu that opens off-screen cannot be used.
Keep the menu inside the viewport. Do not pin it to a desktop left position.
Check: At 320px every item is visible or the menu scrolls inside the viewport.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- Named button trigger.
- Escape restores focus.
- Items are menu items, not a fake list of divs.
Responsive behavior
- Menus flip or align to stay on screen.
- Do not cover the trigger so the person cannot see what opened.
Component states
Closed
aria-expanded false.
Open
Items are reachable. Escape closes.
Correct implementation
The trigger is a named button. Escape closes the menu.
Imports: None. Dependencies: None. Rules: DD-001.
export function RowActions() {
return <button type="button" aria-haspopup="menu" aria-expanded="false">Actions</button>;
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- A primary action hidden in the menu.
- A menu that renders past the right edge.
Testing checklist
Agent prompts for this component are in the AI Development Hub.