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>
    );
}

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

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>
    );
}

With Popup

팝오버 형태의 네비게이션 메뉴 예시입니다.

import { NavigationMenu, VStack } 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
                    defaultValue={'item1'}
                    aria-label="Navigation with selected link"
                >
                    <NavigationMenu.List>
                        <NavigationMenu.Item value="item1">
                            <NavigationMenu.TriggerPrimitive>
                                아이템 1
                                <NavigationMenu.TriggerIndicatorPrimitive />
                            </NavigationMenu.TriggerPrimitive>

                            <NavigationMenu.Content>
                                <VStack>내용물 1</VStack>
                            </NavigationMenu.Content>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item value="item2">
                            <NavigationMenu.TriggerPrimitive>
                                아이템 2
                                <NavigationMenu.TriggerIndicatorPrimitive />
                            </NavigationMenu.TriggerPrimitive>

                            <NavigationMenu.Content>
                                <VStack>내용물 2</VStack>
                            </NavigationMenu.Content>
                        </NavigationMenu.Item>
                        <NavigationMenu.Item value="item3">
                            <NavigationMenu.TriggerPrimitive>
                                아이템 3
                                <NavigationMenu.TriggerIndicatorPrimitive />
                            </NavigationMenu.TriggerPrimitive>

                            <NavigationMenu.Content>
                                <VStack>내용물 3</VStack>
                            </NavigationMenu.Content>
                        </NavigationMenu.Item>
                    </NavigationMenu.List>

                    <NavigationMenu.Viewport
                        portalElement={<NavigationMenu.PortalPrimitive keepMounted />}
                    />
                </NavigationMenu.Root>
            </div>
        </div>
    );
}

Flexible Usage

NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.

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

export default function NavigationMenuSelected() {
    return (
        <div className="space-y-4">
            <NavigationMenu.Root aria-label="Navigation with selected link">
                <NavigationMenu.List>
                    <NavigationMenu.Item>
                        <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                    </NavigationMenu.Item>
                    <NavigationMenu.Item value="1">
                        <NavigationMenu.TriggerPrimitive>
                            아이템
                            <NavigationMenu.TriggerIndicatorPrimitive />
                        </NavigationMenu.TriggerPrimitive>

                        <NavigationMenu.Content>내용물</NavigationMenu.Content>
                    </NavigationMenu.Item>
                </NavigationMenu.List>

                <NavigationMenu.PortalPrimitive>
                    <NavigationMenu.PositionerPrimitive>
                        <NavigationMenu.PopupPrimitive>
                            <NavigationMenu.ViewportPrimitive />
                        </NavigationMenu.PopupPrimitive>
                    </NavigationMenu.PositionerPrimitive>
                </NavigationMenu.PortalPrimitive>
            </NavigationMenu.Root>
        </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

On this page

Property
Size
Direction
Disabled
Selected
Examples
With Icons
With Popup
Flexible Usage
Props Table
NavigationMenu.Root
NavigationMenu.List
NavigationMenu.Item
NavigationMenu.Link