XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Navigation Menu

Previous: Morphic ToastNext: Number Field

Site navigation links with dropdown panels.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  NavigationMenu,3  NavigationMenuContent,4  NavigationMenuIcon,5  NavigationMenuIndicator,6  NavigationMenuItem,7  NavigationMenuLink,8  NavigationMenuList,9  NavigationMenuPopup,10  NavigationMenuPortal,11  NavigationMenuTrigger,12  NavigationMenuViewport13} from "xiod-ui/navigation-menu";

Anatomy

1<NavigationMenu>2  <NavigationMenuList>3    <NavigationMenuItem>4      <NavigationMenuTrigger>5        <NavigationMenuIcon />6      </NavigationMenuTrigger>7      <NavigationMenuContent>8        <NavigationMenuLink />9      </NavigationMenuContent>10    </NavigationMenuItem>11  </NavigationMenuList>12  <NavigationMenuPopup>13    <NavigationMenuViewport />14  </NavigationMenuPopup>15</NavigationMenu>

API Reference

Detailed documentation of properties and options.

NavigationMenu

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
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

Morphic ToastNumber Field
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.
closeDelay
number
50

How long to wait before closing the navigation popup. Specified in milliseconds.

defaultValue
any
null

The uncontrolled value of the item that should be initially selected.

To render a controlled navigation menu, use the value prop instead.

delay
number
50

How long to wait before opening the navigation popup. Specified in milliseconds.

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"
'horizontal'

The orientation of the navigation menu.

value
any
null

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.

To render an uncontrolled navigation menu, use the defaultValue prop instead.

NavigationMenuContent

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
keepMounted
boolean
false

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.

NavigationMenuIcon

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

NavigationMenuIndicator

Accepts render, plus every native <div> attribute.

NavigationMenuItem

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
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

Accepts render, plus every native <a> attribute.

PropTypeDefaultDescription
active
boolean
–

Whether the link points to the current page. Marks it with aria-current="page".

NavigationMenuList

Accepts className, style and render, plus every native attribute of the element it renders.

NavigationMenuPopup

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
align
"center"|"start"|"end"
center

How the calendar lines up with the trigger along that side.

alignOffset
number|OffsetFunction
–

Additional offset along the alignment axis, in pixels.

anchor
NavigationMenu$1.Positioner.Props["anchor"]
–

An element to position the popup against. Defaults to the trigger.

hideArrow
boolean
false

Whether to hide the arrow that points at the trigger.

side
"top"|"bottom"|"left"|"right"|"inline-end"|"inline-start"
bottom

Which side of the copy button the tooltip and toast open on.

sideOffset
number|OffsetFunction
10

The gap between the trigger and the calendar, in pixels.

NavigationMenuPortal

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
container
HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null
–

A parent element to render the portal element into.

keepMounted
boolean
false

Whether to keep the portal mounted in the DOM while the popup is hidden.

NavigationMenuTrigger

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
disabled
boolean
false

Whether the component should ignore user interaction.

nativeButton
boolean
true

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>).

NavigationMenuViewport

Accepts className, style and render, plus every native attribute of the element it renders.