{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "menubar",
"type": "registry:ui",
"title": "Menubar",
"description": "Desktop-style horizontal menu bar (File / Edit / View) with dropdowns and keyboard navigation.",
"dependencies": [
"@radix-ui/react-menubar",
"@saasflare/ui"
],
"files": [
{
"path": "components/ui/menubar.tsx",
"type": "registry:ui",
"content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Menubar primitive — horizontal menu bar with dropdown menus, checkbox items, and keyboard navigation.\n * Built on Radix UI Menubar. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/menubar\n * @layer core\n *\n * @component\n * @example\n * import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@saasflare/ui';\n * \n * \n * File\n * \n * New\n * Open\n * \n * \n * \n */\n\nimport * as React from \"react\"\nimport { CheckIcon, CaretRightIcon, CircleIcon } from \"@saasflare/ui\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link Menubar}.\n *\n * Extends the Radix Menubar root props with {@link SaasflareComponentProps},\n * so `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from .\n */\ninterface MenubarProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Root horizontal menu bar. Owns the Saasflare surface/radius/animated context for\n * its menus and emits the corresponding data attributes.\n */\nfunction Menubar({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: MenubarProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n return (\n \n )\n}\n\n/** A single menu within the menubar, pairing a trigger with its content. */\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/** Portals menu content into the document body, outside the DOM flow. */\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/** Groups radio items so only one can be checked at a time. */\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/** Clickable label that opens its associated menu. */\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Props for {@link MenubarContent}.\n *\n * Extends the Radix Menubar content props (`align`, `alignOffset`,\n * `sideOffset`, …) with {@link SaasflareComponentProps}.\n */\ninterface MenubarContentProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Floating panel that holds a menu's items. Inherits surface/radius/animated and\n * emits the matching data attributes for CSS-driven motion.\n */\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: MenubarContentProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n return (\n \n \n \n )\n}\n\n/** Selectable menu item. Supports an inset variant and a destructive variant. */\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\n/** Menu item with a checkmark indicator reflecting its checked state. */\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n iconWeight,\n ...props\n}: Omit, keyof SaasflareComponentProps> &\n Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/** Menu item with a dot indicator for single-selection radio groups. */\nfunction MenubarRadioItem({\n className,\n children,\n iconWeight,\n ...props\n}: Omit, keyof SaasflareComponentProps> &\n Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/** Non-interactive heading used to caption a group of menu items. */\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\n/** Thin horizontal divider between groups of menu items. */\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/** Right-aligned hint showing the keyboard shortcut for a menu item. */\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\n/** Wrapper for a nested submenu, pairing a sub-trigger with sub-content. */\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/** Menu item that opens a nested submenu, with a trailing caret indicator. */\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n iconWeight,\n ...props\n}: Omit, keyof SaasflareComponentProps> & {\n inset?: boolean\n} & Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n {children}\n \n \n )\n}\n\n/** Floating panel for a nested submenu's items. */\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n type MenubarProps,\n type MenubarContentProps,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n",
"target": "components/ui/menubar.tsx"
}
],
"$meta": {
"source": "https://ui.saasflare.io/r/menubar.json"
}
}