<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Monitoring</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-80 gap-1">
          <li>
            <NavigationMenuLink href="#" className="items-start">
              <BellIcon className="mt-0.5" />
              <div className="flex flex-col gap-0.5">
                <span className="font-medium">Alerts</span>
                <span className="text-text-muted">
                  Detections waiting for triage.
                </span>
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="#" className="items-start">
              <ShieldAlertIcon className="mt-0.5" />
              <div className="flex flex-col gap-0.5">
                <span className="font-medium">Vulnerabilities</span>
                <span className="text-text-muted">
                  CVEs found on your exposed assets.
                </span>
              </div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Inventory</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-80 gap-1">
          <li>
            <NavigationMenuLink href="#" className="items-start">
              <GlobeIcon className="mt-0.5" />
              <div className="flex flex-col gap-0.5">
                <span className="font-medium">Domains</span>
                <span className="text-text-muted">
                  Registered domains and their DNS records.
                </span>
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="#" className="items-start">
              <ServerIcon className="mt-0.5" />
              <div className="flex flex-col gap-0.5">
                <span className="font-medium">Hosts</span>
                <span className="text-text-muted">
                  IP addresses and the services they expose.
                </span>
              </div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
        Reports
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@zenoxai/ui/components/navigation-menu"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Monitoring</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/alerts">Alerts</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Use a navigation menu for top-level navigation across a site or a product area: a marketing site, a portal header, the sections of a large module. Each NavigationMenuItem holds either a trigger with a content panel, or a single link. Give a top-level link the trigger look with className={navigationMenuTriggerStyle()}.

NavigationMenu renders the popup that holds the open panel, so there is nothing else to place. Use align on NavigationMenu to align the popup to the trigger’s start, center or end. Size the content of each panel (w-80 above); the popup animates between sizes as the user moves across triggers.

The navigation menu is for links only. For actions on the current page, use a Dropdown Menu or a Menubar. For the app shell, use the Sidebar.

Examples

Links only

A row of plain links styled as triggers. Set active on the link to the current page: it takes the selection colors, a tinted fill and text, which hover does not change.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink
        href="#"
        active
        className={navigationMenuTriggerStyle()}
      >
        Overview
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
        Threat intelligence
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>
        Brand protection
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Accessibility

The menu is a <nav> with a list of items. Left and Right move between top-level items. A trigger is a button with aria-expanded; it opens on hover and on click, and Enter, Space or Arrow Down open it from the keyboard.
Tab moves through the links of an open panel, and Escape closes it and returns focus to its trigger.
active on a link sets aria-current="page". Set it on exactly one link.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.

NavigationMenu is a bar of site navigation links in which some items open a panel of further links, as in a marketing site header. Each NavigationMenuItem holds a NavigationMenuLink, or a NavigationMenuTrigger with its NavigationMenuContent. For the app's main navigation use Sidebar; for a menu of actions, DropdownMenu or Menubar.

Prop	Type	Default
`actionsRef`	`RefObject<NavigationMenuRootActions \| null>` A ref to imperative actions. - `unmount`: Ends the closing phase of the navigation menu popup after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onValueChange` first, otherwise the navigation menu popup completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. - `close`: Closes the navigation menu imperatively when called.	-
`align`	`"center" \| "start" \| "end"` How to align the popup relative to the specified side.	`start`
`closeDelay`	`number` How long to wait before closing the navigation popup. Specified in milliseconds.	`50`
`defaultValue`	`any` The uncontrolled value of the item that should be initially selected.	`null`
`delay`	`number` How long to wait before opening the navigation popup. Specified in milliseconds.	`50`
`onOpenChangeComplete`	`((open: boolean) => void)` Event handler called after any animations complete when the navigation menu is closed.	-
`onValueChange`	`((value: any, eventDetails: NavigationMenuRootChangeEventDetails) => void)` Callback fired when the value changes.	-
`orientation`	`"horizontal" \| "vertical"` The orientation of the navigation menu.	`'horizontal'`
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuRootState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-
`value`	`any` The controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed.	`null`

NavigationMenuContent

NavigationMenuContent is the panel of links of one item, shown in the popup under the bar.

Prop	Type	Default
`keepMounted`	`boolean` Whether to keep the content mounted in the DOM while the popup is closed. Ensures the content is present during server-side rendering for web crawlers.	`false`
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuContentState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-

NavigationMenuIndicator

Prop	Type	Default
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuIconState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-

NavigationMenuItem

Prop	Type	Default
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuItemState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-
`value`	`any` A unique value that identifies this navigation menu item. If no value is provided, a unique ID will be generated automatically. Use when controlling the navigation menu programmatically.	-

NavigationMenuLink

NavigationMenuLink is a link in the bar or in a panel. Set `active` on the link to the current page: it takes the selection colors (primary-soft fill and text) and keeps them on hover and focus. Pass `render` to use the router's link.

Prop	Type	Default
`active`	`boolean` Whether the link is the currently active page.	`false`
`closeOnClick`	`boolean` Whether to close the navigation menu when the link is clicked.	`false`
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, NavigationMenuLinkState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-

NavigationMenuList

Prop	Type	Default
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuListState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-

NavigationMenuTrigger

NavigationMenuTrigger is a top-level item that opens its NavigationMenuContent panel, with a chevron that turns when it is open.

Prop	Type	Default
`disabled`	`boolean` Whether the component should ignore user interaction.	`false`
`nativeButton`	`boolean` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`true`
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuTriggerState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-

NavigationMenuPositioner

NavigationMenuPositioner places the popup that shows the open panel. NavigationMenu renders it already.

Prop	Type	Default
`align`	`"center" \| "start" \| "end"` How to align the popup relative to the specified side.	`start`
`alignOffset`	`number \| OffsetFunction` Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.	`0`
`anchor`	`Element \| VirtualElement \| RefObject<Element \| null> \| (() => Element \| VirtualElement \| null) \| null` An element to position the popup against. By default, the popup will be positioned against the trigger.	-
`arrowPadding`	`number` Minimum distance to maintain between the arrow and the edges of the popup.	`5`
`collisionAvoidance`	`CollisionAvoidance` Determines how to handle collisions when positioning the popup.	-
`collisionBoundary`	`Boundary` An element or a rectangle that delimits the area that the popup is confined to.	`'clipping-ancestors'`
`collisionPadding`	`Padding` Additional space to maintain from the edge of the collision boundary.	`5`
`disableAnchorTracking`	`boolean` Whether to disable the popup from tracking any layout shift of its positioning anchor.	`false`
`positionMethod`	`"absolute" \| "fixed"` Determines which CSS `position` property to use.	`'absolute'`
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, NavigationMenuPositionerState>` Allows you to replace the component's HTML element with a different tag, or compose it with another component.	-
`side`	`"left" \| "right" \| "top" \| "bottom" \| "inline-end" \| "inline-start"` Which side of the anchor element to align the popup against. May automatically change to avoid collisions.	`bottom`
`sideOffset`	`number \| OffsetFunction` Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.	`0`
`sticky`	`boolean` Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.	`false`