Navigation Menu

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

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

NavigationMenu

Prop	Default	Type	Description
value	—	string	제어형 열린 항목 값(빈 문자열 = 닫힘).
defaultValue	—	string	비제어형 초기 열린 항목.
onValueChange	—	(value: string) => void	열린 항목 변경 시 이벤트 핸들러.
delayDuration	—	number	포인터 enter 시 열리기 전 지연(ms).
skipDelayDuration	—	number	열린 상태에서 항목 간 이동 시 지연.
aria-label	"Main"	string	내비게이션 landmark의 접근 가능한 이름.

NavigationMenuList

내비게이션 항목 목록.

NavigationMenuItem

Prop	Default	Type	Description
value	—	string	열림 상태용 안정적 id(생략 시 자동 생성).

NavigationMenuTrigger

드롭다운 콘텐츠용 트리거 버튼.

NavigationMenuContent

드롭다운 패널 콘텐츠.

NavigationMenuLink

상단 직접 링크에는 드롭다운 화살표용 빈 공간을 남기지 않습니다. 모든 상단 항목은 최소 80px 너비와 28px 높이를 공유하므로, 일반적인 레이블 길이에서는 chevron 유무와 관계없이 같은 크기를 유지합니다. 더 긴 레이블은 잘리지 않도록 확장됩니다.

Prop	Default	Type	Description
active	false	boolean	현재 페이지를 표시합니다(`aria-current="page"`).

NavigationMenuIndicator

활성 항목 인디케이터(시각적 밑줄).