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의 크기를 설정합니다.

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의 방향을 설정합니다.

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의 비활성화 상태를 설정합니다.

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의 선택된 상태를 설정합니다.

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

아이콘과 함께 사용합니다.

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

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

Loading component documentation...

MultiSelect

MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.

Pagination

Pagination은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.

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
NavigationMenu.Trigger
NavigationMenu.TriggerPrimitive
NavigationMenu.TriggerIndicatorPrimitive
NavigationMenu.Content
NavigationMenu.PortalPrimitive
NavigationMenu.PositionerPrimitive
NavigationMenu.PopupPrimitive
NavigationMenu.Viewport
NavigationMenu.ViewportPrimitive