Skip to content
Menus & Navigation

Navigation Menu

Horizontal menu bar with disclosure panels.

Import

tsx
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@cronus-ui/ui";
bash
npx cronus-ui add navigation-menu

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component NavigationMenuDefault layout:inline style:navigation-menu {
  label "Products"
  text "Analytics"
  text "Docs"
}

page "/audit/navigation-menu/default" type:custom {
  use NavigationMenuDefault
}

API Reference

Generated from the component's exported types.

NavigationMenuProps

Extends ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>

Skip NavigationMenuProps props table
PropTypeDefaultDescription
value
string—Controlled value.
defaultValue
string—Uncontrolled initial value.
onValueChange
(value: string) => void—Called when the value changes.
dir
"ltr" | "rtl"—Reading direction. Inherits from the document when omitted.
orientation
"horizontal" | "vertical"——
delayDuration
number——
skipDelayDuration
number——

NavigationMenuListProps

Extends ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>

Skip NavigationMenuListProps props table
PropTypeDefaultDescription
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

NavigationMenuItemProps

Extends ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>

Skip NavigationMenuItemProps props table
PropTypeDefaultDescription
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

NavigationMenuTriggerProps

Extends ComponentPropsWithoutRef< typeof NavigationMenuPrimitive.Trigger >

Skip NavigationMenuTriggerProps props table
PropTypeDefaultDescription
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

NavigationMenuContentProps

Extends ComponentPropsWithoutRef< typeof NavigationMenuPrimitive.Content >

Skip NavigationMenuContentProps props table
PropTypeDefaultDescription
forceMount
boolean—Keep the node mounted when closed, for exit animation.
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

NavigationMenuLinkProps

Extends ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>

Skip NavigationMenuLinkProps props table
PropTypeDefaultDescription
asChild
boolean—Render as the child element via Slot.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

NavigationMenuIndicatorProps

Extends ComponentPropsWithoutRef< typeof NavigationMenuPrimitive.Indicator >

Skip NavigationMenuIndicatorProps props table
PropTypeDefaultDescription
forceMount
boolean—Keep the node mounted when closed, for exit animation.
className
string—Additional class names merged onto the root.

NavigationMenuViewportProps

Extends ComponentPropsWithoutRef< typeof NavigationMenuPrimitive.Viewport >

Skip NavigationMenuViewportProps props table
PropTypeDefaultDescription
forceMount
boolean—Keep the node mounted when closed, for exit animation.
className
string—Additional class names merged onto the root.