Theme PlaygroundBlocks

NavigationMenu

여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다. 
import { NavigationMenu } from '@vapor-ui/core';

export default function DefaultNavigationMenu() {
    return (
        <NavigationMenu.Root size="md" aria-label="Navigation menu">
            <NavigationMenu.List>
                <NavigationMenu.Item>
                    <NavigationMenu.Link href="#">Default Link</NavigationMenu.Link>
                </NavigationMenu.Item>
                <NavigationMenu.Item>
                    <NavigationMenu.Link href="#" selected>
                        Selected Link
                    </NavigationMenu.Link>
                </NavigationMenu.Item>
                <NavigationMenu.Item>
                    <NavigationMenu.Link href="#" disabled>
                        Disabled Link
                    </NavigationMenu.Link>
                </NavigationMenu.Item>
            </NavigationMenu.List>
        </NavigationMenu.Root>
    );
}

Property

Size

NavigationMenu 사이즈는 sm, md, lg, xl로 제공합니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuSize() {
    return (
        <div className="space-y-4">
            <NavigationMenu.Root size="sm" aria-label="Small navigation">
                <NavigationMenu.List>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#">Small</NavigationMenu.Link>
                    </NavigationMenu.Item>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#" selected>
                            Small Selected
                        </NavigationMenu.Link>
                    </NavigationMenu.Item>
                </NavigationMenu.List>
            </NavigationMenu.Root>

            <NavigationMenu.Root size="md" aria-label="Medium navigation">
                <NavigationMenu.List>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#">Medium</NavigationMenu.Link>
                    </NavigationMenu.Item>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#" selected>
                            Medium Selected
                        </NavigationMenu.Link>
                    </NavigationMenu.Item>
                </NavigationMenu.List>
            </NavigationMenu.Root>

            <NavigationMenu.Root size="lg" aria-label="Large navigation">
                <NavigationMenu.List>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#">Large</NavigationMenu.Link>
                    </NavigationMenu.Item>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#" selected>
                            Large Selected
                        </NavigationMenu.Link>
                    </NavigationMenu.Item>
                </NavigationMenu.List>
            </NavigationMenu.Root>

            <NavigationMenu.Root size="xl" aria-label="Extra large navigation">
                <NavigationMenu.List>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#">Extra Large</NavigationMenu.Link>
                    </NavigationMenu.Item>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#" selected>
                            Extra Large Selected
                        </NavigationMenu.Link>
                    </NavigationMenu.Item>
                </NavigationMenu.List>
            </NavigationMenu.Root>
        </div>
    );
}

Direction

NavigationMenu 방향은 horizontal, vertical로 제공합니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuDirection() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-2">Horizontal</h4>
                <NavigationMenu.Root direction="horizontal" aria-label="Horizontal navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                About
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">Contact</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Vertical</h4>
                <NavigationMenu.Root direction="vertical" aria-label="Vertical navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                About
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">Contact</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Stretch

NavigationMenu 항목의 너비를 컨텐츠 너비에 맞춰 늘릴지 여부를 결정하는 속성입니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuStretch() {
    return (
        <div className="space-y-4 w-full">
            <div>
                <h4 className="text-sm font-medium mb-2">Default (stretch=false)</h4>
                <NavigationMenu.Root aria-label="Default navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                제품
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">서비스</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">Stretch (stretch=true)</h4>
                <NavigationMenu.Root stretch aria-label="Stretched navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                제품
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">서비스</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Disabled

NavigationMenu.Link의 비활성화 상태를 보여주는 예시입니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuDisabled() {
    return (
        <div className="space-y-4">
            <div>
                <h4 className="text-sm font-medium mb-2">기본 상태와 비활성화 상태</h4>
                <NavigationMenu.Root aria-label="Navigation with disabled links">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">활성 링크</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" disabled>
                                비활성화 링크
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">다른 활성 링크</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">선택된 상태와 비활성화 상태</h4>
                <NavigationMenu.Root aria-label="Navigation with selected and disabled">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                선택된 링크
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" disabled>
                                비활성화 링크
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">연락처</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Selected

NavigationMenu.Link의 선택된 상태를 보여주는 예시입니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuSelected() {
    return (
        <div className="space-y-4">
            <div>
                <h4 className="text-sm font-medium mb-2">선택된 상태 표시</h4>
                <NavigationMenu.Root aria-label="Navigation with selected link">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" selected>
                                제품 (선택됨)
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">서비스</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#">회사소개</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Examples

Simple Usage

NavigationMenu.LinkItem을 사용한 가장 간단한 형태입니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuSimple() {
    return (
        <NavigationMenu.Root size="md" aria-label="Simple navigation">
            <NavigationMenu.List>
                <NavigationMenu.LinkItem href="/">홈</NavigationMenu.LinkItem>
                <NavigationMenu.LinkItem href="/products" selected>
                    제품
                </NavigationMenu.LinkItem>
                <NavigationMenu.LinkItem href="/about">회사소개</NavigationMenu.LinkItem>
                <NavigationMenu.LinkItem href="/contact" disabled>
                    연락처
                </NavigationMenu.LinkItem>
            </NavigationMenu.List>
        </NavigationMenu.Root>
    );
}

With Icons

Nav에 아이콘을 추가한 예시입니다.

import { NavigationMenu } from '@vapor-ui/core';
import { HomeIcon, SettingIcon, StarIcon, UserIcon } from '@vapor-ui/icons';

export default function NavigationMenuWithIcon() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-2">아이콘과 텍스트 조합</h4>
                <NavigationMenu.Root aria-label="Navigation with icons and text">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                <HomeIcon size={16} />홈
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                selected
                                className="flex items-center gap-2"
                            >
                                <StarIcon size={16} />
                                즐겨찾기
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                <UserIcon size={16} />
                                프로필
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                <SettingIcon size={16} />
                                설정
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">아이콘만 사용</h4>
                <NavigationMenu.Root aria-label="Navigation with icons only">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                className="flex items-center justify-center"
                                aria-label="홈"
                            >
                                <HomeIcon size={20} />
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                selected
                                className="flex items-center justify-center"
                                aria-label="즐겨찾기"
                            >
                                <StarIcon size={20} />
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                className="flex items-center justify-center"
                                aria-label="프로필"
                            >
                                <UserIcon size={20} />
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                className="flex items-center justify-center"
                                aria-label="설정"
                            >
                                <SettingIcon size={20} />
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">세로 방향에서의 아이콘</h4>
                <NavigationMenu.Root
                    direction="vertical"
                    aria-label="Vertical navigation with icons"
                >
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" className="flex items-center gap-3">
                                <HomeIcon size={16} />
                                대시보드
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                selected
                                className="flex items-center gap-3"
                            >
                                <StarIcon size={16} />
                                즐겨찾기
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="#" className="flex items-center gap-3">
                                <UserIcon size={16} />
                                사용자 관리
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link
                                href="#"
                                disabled
                                className="flex items-center gap-3"
                            >
                                <SettingIcon size={16} />
                                시스템 설정
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Composition Pattern

NavigationMenu.Root, NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Link를 조합한 패턴입니다.

import { NavigationMenu } from '@vapor-ui/core';

export default function NavigationMenuComposition() {
    return (
        <div className="space-y-6">
            <div>
                <h4 className="text-sm font-medium mb-2">기본 컴포지션 패턴</h4>
                <NavigationMenu.Root aria-label="Basic composition navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="/">홈</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="/products" selected>
                                제품
                            </NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="/about">회사소개</NavigationMenu.Link>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item>
                            <NavigationMenu.Link href="/contact">연락처</NavigationMenu.Link>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>

            <div>
                <h4 className="text-sm font-medium mb-2">LinkItem 패턴 (편의 컴포넌트)</h4>
                <NavigationMenu.Root aria-label="LinkItem pattern navigation">
                    <NavigationMenu.List>
                        <NavigationMenu.LinkItem href="/">홈</NavigationMenu.LinkItem>
                        <NavigationMenu.LinkItem href="/products">제품</NavigationMenu.LinkItem>
                        <NavigationMenu.LinkItem href="/about">회사소개</NavigationMenu.LinkItem>
                        <NavigationMenu.LinkItem href="/contact">연락처</NavigationMenu.LinkItem>
                    </NavigationMenu.List>
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Props Table

NavigationMenu의 메인 컨테이너 컴포넌트입니다. 네비게이션의 크기, 모양, 방향 등의 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다. 이 컴포넌트는 nav 요소를 기반으로 합니다.

PropDefaultType
defaultValue?
-
string
value?
-
string
onValueChange?
-
function
delayDuration?
200
number
skipDelayDuration?
300
number
dir?
-
ltrrtl
orientation?
horizontal
horizontalvertical
aria-label?
-
string
direction?
horizontal
horizontalvertical
size?
md
smmdlgxl
stretch?
false
boolean
disabled?
false
boolean
children?
-
ReactNode

NavigationMenu의 리스트 컨테이너 컴포넌트입니다. 네비게이션 아이템들을 담는 리스트 역할을 합니다. 이 컴포넌트는 ul 요소를 기반으로 합니다.

PropDefaultType
render?
ul
ReactElement
className?
-
string
children?
-
ReactNode

NavigationMenu의 개별 아이템 컴포넌트입니다. 각각의 네비게이션 링크를 감싸는 리스트 아이템 역할을 합니다. 이 컴포넌트는 li 요소를 기반으로 합니다.

PropDefaultType
render?
li
ReactElement
value?
-
string
className?
-
string
children?
-
ReactNode

NavigationMenu의 링크 컴포넌트입니다. 실제 네비게이션 링크를 표시하며, 선택됨 상태와 비활성화 상태를 관리합니다. 이 컴포넌트는 a 요소를 기반으로 합니다.

PropDefaultType
render?
a
ReactElement
selected?
false
boolean
disabled?
false
boolean
href?
-
string
children?
-
ReactNode

NavigationMenu.Item과 NavigationMenu.Link를 하나로 결합한 편의 컴포넌트입니다. 복잡한 구성 없이 기본 네비게이션 링크 기능을 빠르게 사용할 수 있습니다.

PropDefaultType
render?
li
ReactElement
selected?
false
boolean
disabled?
false
boolean
href?
-
string
className?
-
string
children?
-
ReactNode

On this page

Property
Size
Direction
Stretch
Disabled
Selected
Examples
Simple Usage
With Icons
Composition Pattern
Props Table
NavigationMenu.Root
NavigationMenu.List
NavigationMenu.Item
NavigationMenu.Link
NavigationMenu.LinkItem