Navigation Menu

• Products󰯑
  ComponentsButtons, inputs, overlaysTokensColor, space, typeIconsSystem icon setMotionDuration and easing
• Docs󰯑
• Pricing
• Blog

Contract

Overview

Machine-readable contract from Component Spec.

component: navigation-menuexport: NavigationMenuversion: 1attributes: data-refineui=navigation-menu

Anatomy

Part	data-refineui
root	navigation-menu
content	navigation-menu-content
content_panel	navigation-menu-content-panel
indicator	navigation-menu-indicator
item	navigation-menu-item
link	navigation-menu-link
list	navigation-menu-list
trigger	navigation-menu-trigger

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: open, closed
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role	Required attributes
navigation-menu-trigger	button	—	aria-expanded: required=true, type: boolean; aria-controls: required=true, type: string
navigation-menu-content	div	region	—

Keyboard

Key	Action	Native
Escape	close	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink
} from "@refineui/react";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink href="/" active>
        Home
      </NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>
        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

NavigationMenu

Prop	Default	Type	Description
value	—	string	Controlled open item value (empty string = closed).
defaultValue	—	string	Uncontrolled initial open item.
onValueChange	—	(value: string) => void	Event handler when open item changes.
delayDuration	—	number	Delay (ms) before opening on pointer enter.
skipDelayDuration	—	number	Delay when moving between items while open.
aria-label	"Main"	string	Accessible name for the navigation landmark.

NavigationMenuList

List of navigation items.

NavigationMenuItem

Prop	Default	Type	Description
value	—	string	Stable id for open state (auto-generated when omitted).

NavigationMenuTrigger

Trigger button for dropdown content.

NavigationMenuContent

Dropdown panel content.

NavigationMenuLink

Prop	Default	Type	Description
active	false	boolean	Marks the current page (`aria-current="page"`).

NavigationMenuIndicator

Active item indicator (visual underline).