{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "menubar",
"title": "Menubar",
"description": "A persistent horizontal menu bar for application-style commands, built on Base UI.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "registry/base/ui/menubar.tsx",
"content": "\"use client\"\n\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * MenubarContent renders through a Portal, so it doesn't inherit `dir` from\n * a nearby wrapper (only from document.documentElement). MenubarTrigger\n * measures the ambient direction where it's actually rendered and pushes it\n * here so MenubarContent can apply it explicitly to the portaled popup.\n *\n * The DOM `dir` attribute alone isn't enough: Base UI resolves logical\n * `side=\"inline-end\"` values through its own internal DirectionContext, not\n * from CSS/DOM `dir`, so the tree is also wrapped in Base UI's own\n * DirectionProvider — otherwise submenus always open as if LTR.\n */\nconst MenubarDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n return (\n \n \n \n \n \n )\n}\n\nfunction MenubarMenu({ ...props }: MenuPrimitive.Root.Props) {\n return \n}\n\nfunction MenubarGroup({ ...props }: MenuPrimitive.Group.Props) {\n return \n}\n\nfunction MenubarTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(MenubarDirContext)\n\n React.useEffect(() => {\n function update() {\n if (!ref.current) return\n setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n }\n\n update()\n\n const observer = new MutationObserver(update)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"dir\"],\n subtree: true,\n })\n\n return () => observer.disconnect()\n }, [setDir])\n\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n side,\n sideOffset = 8,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick<\n MenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n const { dir } = React.useContext(MenubarDirContext)\n\n return (\n \n \n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: MenuPrimitive.Item.Props & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return \n}\n\nfunction MenubarRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuPrimitive.RadioItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: MenuPrimitive.GroupLabel.Props & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n MenubarGroup,\n MenubarItem,\n MenubarLabel,\n MenubarMenu,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}