NavigationMenu
여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.Property
Size
NavigationMenu의 크기를 설정합니다.
Direction
NavigationMenu의 방향을 설정합니다.
Disabled
NavigationMenu의 비활성화 상태를 설정합니다.
Current
NavigationMenu의 현재 페이지 상태를 설정합니다.
Examples
With Icons
아이콘과 함께 사용합니다.
With Popup
팝오버 형태로 사용합니다.
Flexible Usage
NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.
Props Table
NavigationMenu.Root
Root of the NavigationMenu compound component, a set of site navigation links where some items open a panel of further links. Shares direction, size, and disabled with the parts inside it. Renders a <nav> element, or a <div> element when nested.
| 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
List that holds the navigation items, laid out in the direction set on NavigationMenu.Root. Renders a <ul> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Item
Holds one navigation entry, either a link or a trigger with its content. Renders an <li> element.
| Prop | Default | Type |
|---|---|---|
value? | - | any |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Link
Link to a page in the navigation menu. Set current on the link for the page the user is on. Renders an <a> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
current? | - | boolean |
disabled? | - | boolean |
style? | - | React.CSSPropertiesfunction |
closeOnClick? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.Trigger
Combines NavigationMenu.TriggerPrimitive and NavigationMenu.TriggerIndicatorPrimitive into a single part, with the chevron after the label. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
NavigationMenu.TriggerPrimitive
Button that opens the content of its item when hovered or clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
NavigationMenu.TriggerIndicatorPrimitive
Chevron icon that shows whether the content of the item is open. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Content
Holds the links shown in the panel while its item is open. Place it next to the trigger inside NavigationMenu.Item. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.PortalPrimitive
Portal container that renders the navigation menu panel outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
NavigationMenu.PositionerPrimitive
Positions the navigation menu panel against the open trigger and keeps it inside the viewport. Renders a <div> element.
| 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
The navigation menu panel, with an arrow that points at the open trigger. Renders a <nav> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.Viewport
Combines NavigationMenu.PortalPrimitive, NavigationMenu.PositionerPrimitive, NavigationMenu.PopupPrimitive, and NavigationMenu.ViewportPrimitive into a single part. Use portalElement, positionerElement, or popupElement to replace the portal, positioner, or popup. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
popupElement? | - | ReactElement<NavigationMenuPopupPrimitive.Props> |
portalElement? | - | ReactElement<NavigationMenuPortalPrimitive.Props> |
positionerElement? | - | ReactElement<NavigationMenuPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
NavigationMenu.ViewportPrimitive
Clipping area inside the panel that shows the content of the open item. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |