Avala Design
← Components/primitives

DropdownMenu

Carbon's Menu re-implemented on Radix DropdownMenu. Includes Item, CheckboxItem, RadioItem, Separator, Label, Sub-menu primitives.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup } from "@avala/design";

<DropdownMenu>
  <DropdownMenuCheckboxItem />
  <DropdownMenuContent />
  <DropdownMenuGroup />
</DropdownMenu>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-dropdownmenu--defaultOpen in Storybook →

When to use

  • Action menus anchored to a trigger (`Button`, `IconButton`, avatar, toolbar).
  • Multi-state selections within a menu (checkbox / radio items).
  • Nested submenu hierarchies.

When not to use

  • Single-choice form input → use `Select`.
  • Top-level site nav with mega-menu content → use `NavigationMenu`.
  • Persistent rich-content overlay → use `Popover`.
  • Searchable / typeahead lists → use the ComboBox or CommandPalette patterns.