Kebab Menu

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/kebab-menu

UsageCopy Anchor Link

import { KebabMenu } from "@/components/kebab-menu";

<KebabMenu
  items={[
    { id: "rename", label: "Rename…", icon: EditIcon, onSelect: rename },
    {
      id: "delete",
      label: "Delete…",
      destructive: true,
      onSelect: askToDelete,
    },
  ]}
  label="Actions for Launch demo"
/>

Use it for per-item actions in every list and card: recordings, assets, scenes, scheduled livestreams, chat rows. The row's primary action stays a click on the row; the menu holds what you do less often.

Don't build a menu by hand for a row, and don't put the row's one main action in it.

ExamplesCopy Anchor Link

Groups, keys and a busy itemCopy Anchor Link

Items with the same group sit together, a hairline between groups, in the order each group first appears. Destructive items always go last, in a group of their own. shortcut takes a Shortcut Keys. While an item's work runs, busy swaps the dots for a spinner, and a disabled item says why on hover.

Revealed on hoverCopy Anchor Link

reveal="hover" hides the trigger until its host row is hovered or holds focus. Mark the row with group/kebab-host. The trigger stays visible while its menu is open, while it has keyboard focus and while it's busy.

With a confirm dialogCopy Anchor Link

A destructive item that can't be undone opens a Confirm Dialog, and its label ends in "…". The recordings list above does this for Delete.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

The trigger is a button named by label: name the item it acts on ("Actions for Launch demo"), never just "More". A click on the trigger or in the menu never reaches a clickable row behind it. A disabled item stays in the arrow-key order and is described by its disabledReason, through Disabled Reason.

API referenceCopy Anchor Link

KebabMenuItemCopy Anchor Link

kebabMenuGroups(items) returns the items in their groups, destructive last, for a menu of your own that should agree with this one.