{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "menubar", "title": "Menubar", "description": "A menubar component.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "@cubby-ui/switch", "@cubby-ui/elevated" ], "files": [ { "path": "registry/default/menubar/menubar.tsx", "content": "import { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { Menubar as BaseMenubar } from \"@base-ui/react/menubar\";\nimport { cn } from \"@/lib/utils\";\nimport {\n solidSurface,\n type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\n\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport ArrowRight01Icon from \"@hugeicons/core-free-icons/ArrowRight01Icon\";\nimport Tick02Icon from \"@hugeicons/core-free-icons/Tick02Icon\";\nimport {\n SwitchVisual,\n type SwitchVisualProps,\n} from \"@/registry/default/switch/switch\";\n\n// Shared shell for checkbox and radio items. Padding matches the plain menu\n// item so labels line up across every item type; the indicator lives in a\n// reserved right-hand column so toggling never shifts the label.\nconst toggleItemClasses =\n \"group/switch data-highlighted:bg-surface-hover data-highlighted:text-accent-foreground grid cursor-default items-center rounded-md px-2.5 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\";\n\n// The tick draws itself in on check. `pathLength` restates the path as 1 unit\n// long, so the dash values are fractions of the stroke and survive a HugeIcons\n// reshape. Deriving the icon array is the only way to reach the path.\nconst tickIcon = Tick02Icon.map(([tag, attrs]) => [\n tag,\n { ...attrs, pathLength: 1 },\n]) as typeof Tick02Icon;\n\nconst checkmarkClasses =\n \"[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none\";\n\nfunction Menubar({\n className,\n level = 2,\n shadowLevel = 2,\n ...props\n}: React.ComponentProps & {\n /** Surface elevation level (1-8). Defaults to 2 — a subtle inline toolbar that sits just above the page. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Defaults to 2. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n );\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction MenubarTrigger({\n className,\n delay = 0,\n closeDelay = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MenubarContent({\n className,\n children,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n level = 3,\n shadowLevel = 3,\n ...props\n}: React.ComponentProps & {\n align?: BaseMenu.Positioner.Props[\"align\"];\n alignOffset?: BaseMenu.Positioner.Props[\"alignOffset\"];\n sideOffset?: BaseMenu.Positioner.Props[\"sideOffset\"];\n /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog or other elevated container. Defaults to 3. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Pinned to 3 by default so the menu reads the same regardless of nesting depth. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n {/* No guard here, unlike DropdownMenu: there one positioner is shared by\n detached triggers and physically travels between them. Each MenubarMenu\n mounts its own, with no previous position to animate from. */}\n \n \n {/*\n Kept for sizing, not for content transitions. Base UI runs the popup\n auto-resize from inside the Viewport, and that is what writes\n --positioner-width / --positioner-height (plus --popup-width /\n --popup-height, which sit at `auto` between resizes). The positioner\n above sizes off those, so dropping the Viewport leaves them unset\n and its explicit box collapses.\n\n Deliberately carries no morph styling. A menubar can't morph: each\n MenubarMenu is its own Menu.Root, so moving from File to Edit mounts\n a new popup rather than swapping content within one, and\n data-current / data-previous / data-activation-direction never\n appear. (Verified: two distinct popup elements across a switch.)\n */}\n \n {children}\n \n \n \n \n );\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction MenubarLinkItem({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n inset,\n indicator = \"check\",\n switchColor = \"primary\",\n switchShape = \"circle\",\n switchSize = \"xs\",\n switchMotion = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n /** Which indicator sits in the right-hand column. `\"switch\"` is visual only — the item keeps the `menuitemcheckbox` role. */\n indicator?: \"check\" | \"switch\";\n /** Checked track colour, when `indicator=\"switch\"`. */\n switchColor?: SwitchVisualProps[\"color\"];\n /** Thumb silhouette, when `indicator=\"switch\"`. */\n switchShape?: SwitchVisualProps[\"shape\"];\n /** Thumb size, when `indicator=\"switch\"`. Defaults to `xs`, which matches the row's text. */\n switchSize?: SwitchVisualProps[\"size\"];\n /** How the thumb travels, when `indicator=\"switch\"`. */\n switchMotion?: SwitchVisualProps[\"motion\"];\n}) {\n return (\n \n \n {children}\n \n {indicator === \"switch\" ? (\n // Visual only: the row carries the role and the click target, so a real\n // Switch here would nest a focusable control inside a menuitemcheckbox.\n // Base UI's indicator supplies the aria-hidden.\n }\n />\n ) : (\n \n \n \n )}\n \n );\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n \n {children}\n \n \n \n \n \n );\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<\"div\"> & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction MenubarGroupLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction MenubarSubContent({\n className,\n children,\n sideOffset = 8,\n level = 5,\n shadowLevel = 3,\n ...props\n}: React.ComponentProps & {\n sideOffset?: BaseMenu.Positioner.Props[\"sideOffset\"];\n /** Surface elevation level for the submenu bg (1-8). Defaults to 5 — one tier above the parent menu's default of 3. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Pinned to 3 by default so the submenu reads the same dropdown weight as its parent. */\n shadowLevel?: SurfaceLevel;\n}) {\n return (\n \n \n \n {/* The popup above is capped at --available-height and clips, so the\n scroll container has to live here or a tall submenu silently\n truncates. The main popups get this from Menu.Viewport; a\n submenu has none, so it is spelled out. */}\n
\n {children}\n
\n \n \n \n );\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarGroupLabel,\n MenubarLabel,\n MenubarItem,\n MenubarLinkItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n};\n", "type": "registry:ui", "target": "components/ui/cubby-ui/menubar.tsx" } ], "type": "registry:ui" }