{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "NavigationMenu", "dependencies": [ "@base-ui/react", "cn", "lucide-react", "rescript-base-ui" ], "registryDependencies": [ "@rescript-shadcn/Icons" ], "files": [ { "path": "registry/base/ui/NavigationMenu.res", "content": "open BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option) => string = \"cn\"\n\nlet navigationMenuTriggerStyle = () =>\n \"hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n\ntype props<'value> = {\n ...BaseUi.NavigationMenu.Root.props<'value>,\n align?: Align.t,\n}\n\nlet toBaseUiProps: props<'value> => BaseUi.NavigationMenu.Root.props<\n 'value,\n> = %raw(`({align, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props<'value>) => {\n let children = props.children->Option.getOr(React.null)\n let align = props.align->Option.getOr(Align.Start)\n toBaseUiProps}\n dataSlot={props.dataSlot->Option.getOr(\"navigation-menu\")}\n className={cn(\n \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n props.className,\n )}\n >\n {children}\n \n \n \n \n \n \n \n \n}\n\nmodule List = {\n @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n Option.getOr(\"navigation-menu-list\")}\n className={cn(\n \"gap-0 group flex flex-1 list-none items-center justify-center\",\n props.className,\n )}\n />\n}\n\nmodule Item = {\n @react.componentWithProps(BaseUi.NavigationMenu.Item.props)\n let make = (props: BaseUi.NavigationMenu.Item.props<'value>) =>\n Option.getOr(\"navigation-menu-item\")}\n className={cn(\" relative\", props.className)}\n />\n}\n\nmodule Trigger = {\n @react.componentWithProps(BaseUi.NavigationMenu.Trigger.props)\n let make = (props: BaseUi.NavigationMenu.Trigger.props) => {\n let type_ = switch (props.type_, props.nativeButton, props.render) {\n | (Some(type_), _, _) => Some(type_)\n | (None, Some(false), _)\n | (None, _, Some(_)) =>\n None\n | (None, _, _) => Some(Button)\n }\n Option.getOr(\"navigation-menu-trigger\")}\n className={cn(`${navigationMenuTriggerStyle()} group`, props.className)}\n >\n {props.children->Option.getOr(React.null)}\n \n \n }\n}\n\nmodule Content = {\n @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n Option.getOr(\"navigation-menu-content\")}\n className={cn(\n \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n props.className,\n )}\n />\n}\n\nmodule Positioner = {\n type props = {\n ...BaseUi.Types.BaseUIComponentProps.t,\n ...BaseUi.AnchorPositioning.SharedParametersWithoutOffsets.t,\n sideOffset?: float,\n alignOffset?: float,\n }\n\n let toBaseUiProps: props => BaseUi.NavigationMenu.Positioner.props = %raw(`({sideOffset, alignOffset, ...props}) => props`)\n\n @react.componentWithProps(props)\n let make = (props: props) => {\n let children = props.children\n let side = props.side->Option.getOr(Side.Bottom)\n let sideOffset = props.sideOffset->Option.getOr(8.)\n let align = props.align->Option.getOr(Align.Start)\n let alignOffset = props.alignOffset->Option.getOr(0.)\n \n toBaseUiProps}\n side\n sideOffset={Const(sideOffset)}\n align\n alignOffset={Const(alignOffset)}\n className={cn(\n \"ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n props.className,\n )}\n >\n {switch children {\n | Some(value) => value\n | None =>\n \n \n \n }}\n \n \n }\n}\n\nmodule Link = {\n @react.componentWithProps(BaseUi.NavigationMenu.Link.props)\n let make = (props: BaseUi.NavigationMenu.Link.props) =>\n Option.getOr(\"navigation-menu-link\")}\n className={cn(\n \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\",\n props.className,\n )}\n />\n}\n\nmodule Indicator = {\n @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n Option.getOr(\"navigation-menu-indicator\")}\n className={cn(\n \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n props.className,\n )}\n >\n
\n \n}\n", "type": "registry:file", "target": "@ui/NavigationMenu.res" } ], "type": "registry:ui" }