Avala Design
← Components/patterns

OverflowMenu

Carbon-spec overflow menu. The "kebab" / "more" trigger that opens a DropdownMenu. Used in table rows, card headers, and toolbars where secondary actions need to live behind a single icon.

patternsstablea11y: untested3/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 { OverflowMenu, OverflowMenuItem, OverflowMenuLabel, OverflowMenuSeparator } from "@avala/design";

<OverflowMenu>
  <OverflowMenuItem />
  <OverflowMenuLabel />
  <OverflowMenuSeparator />
</OverflowMenu>

All variants

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

patterns-overflowmenu--defaultOpen in Storybook →

When to use

  • Row-level / card-level secondary actions that don't deserve a primary visible button (Edit / Duplicate / Archive on a table row).
  • Toolbar overflow when there are more actions than fit on the row.
  • Anywhere the "..." metaphor reads correctly — supplemental, not primary.

When not to use