NavigationMenu
여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.Property
Size
NavigationMenu의 크기를 설정합니다.
Direction
NavigationMenu의 방향을 설정합니다.
Disabled
NavigationMenu의 비활성화 상태를 설정합니다.
Current
NavigationMenu의 현재 페이지 상태를 설정합니다.
Examples
With Icons
아이콘과 함께 사용합니다.
With Popup
팝오버 형태로 사용합니다.
Flexible Usage
NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.
Props Table
NavigationMenu.Root
일부 항목이 추가 링크 패널을 여는 사이트 탐색 링크 모음인 NavigationMenu 복합 컴포넌트의 루트. 내부 파트와 direction, size, disabled를 공유합니다. <nav> 요소로 렌더링되며, 중첩된 경우 <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
direction? | horizontal | horizontalvertical |
size? | md | smmdlgxl |
defaultValue? | null | unknown |
onValueChange? | - | function |
value? | null | unknown |
className? | - | stringfunction |
disabled? | - | boolean |
style? | - | React.CSSPropertiesfunction |
actionsRef? | - | React.RefObject<NavigationMenu.Root.Actions | null> |
closeDelay? | 50 | number |
delay? | 50 | number |
onOpenChangeComplete? | - | function |
orientation? | - | horizontalvertical |
render? | - | ReactElementfunction |
NavigationMenu.List
NavigationMenu.Root에 설정한 direction에 따라 배치되는 탐색 항목을 담는 목록. <ul> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Item
링크 또는 콘텐츠가 있는 트리거 중 하나의 탐색 항목을 담습니다. <li> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value? | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Link
탐색 메뉴 안의 페이지 링크. 사용자가 보고 있는 페이지의 링크에는 current를 설정하세요. <a> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
current? | - | boolean |
disabled? | - | boolean |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.Trigger
NavigationMenu.TriggerPrimitive와 NavigationMenu.TriggerIndicatorPrimitive를 레이블 뒤에 쉐브론이 오는 하나의 파트로 합칩니다. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
NavigationMenu.TriggerPrimitive
마우스를 올리거나 클릭하면 항목의 콘텐츠를 여는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
NavigationMenu.TriggerIndicatorPrimitive
항목의 콘텐츠가 열려 있는지 보여 주는 쉐브론 아이콘. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Content
항목이 열려 있는 동안 패널에 표시되는 링크를 담습니다. NavigationMenu.Item 안에서 트리거 옆에 배치하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.PortalPrimitive
일반 DOM 계층 밖에서 탐색 메뉴 패널을 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.PositionerPrimitive
탐색 메뉴 패널을 열린 트리거 기준으로 배치하고 뷰포트 안에 유지합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | center | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | absolute | fixedabsolute |
side? | bottom | bottomleftrighttopinline-endinline-start |
sideOffset? | 10 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.PopupPrimitive
열린 트리거를 가리키는 화살표가 있는 탐색 메뉴 패널. <nav> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Viewport
NavigationMenu.PortalPrimitive, NavigationMenu.PositionerPrimitive, NavigationMenu.PopupPrimitive, NavigationMenu.ViewportPrimitive를 하나의 파트로 합칩니다. 포털, 포지셔너, 팝업을 대체하려면 portalElement, positionerElement, popupElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
popupElement? | - | ReactElement<NavigationMenuPopupPrimitive.Props> |
portalElement? | - | ReactElement<NavigationMenuPortalPrimitive.Props> |
positionerElement? | - | ReactElement<NavigationMenuPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.ViewportPrimitive
패널 안에서 열린 항목의 콘텐츠를 보여 주는 클리핑 영역. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |