Menubar

Menubars are containers. Choose elevation based on context: standalone vs nested.

Basic Usage

Open state is shown by default for documentation/screenshot purposes.

Variants are for the popup surface (MenubarContent), not the trigger. Default uses the smaller shadow for clarity without noise.

Default (shadow-paper-sm)

Elevated (shadow-paper-md)

Menubar is built on top of Radix UI Menubar. Popup shadow variants are designed for Paper Cut's elevation budget.

PropTypeDescription

variant"section" | "elevated" | "flat"Menubar container elevation

PropTypeDescription

shadow"default" | "elevated"Popup shadow size (default is smaller)

sideOffsetnumberDistance from trigger (default: 8)

align"start" | "center" | "end"Horizontal alignment (default: start)

PropTypeDescription

variant"default" | "filled" | "pill" | "underline"Trigger visual style