Nav

Import

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

Preview

<Nav.Root size="md" shape="pill">
<Nav.List>
  <Nav.Item><Nav.Link href="#">Default Link</Nav.Link></Nav.Item>
  <Nav.Item><Nav.Link href="#" active>Active Link</Nav.Link></Nav.Item>
  <Nav.Item><Nav.Link href="#" disabled>Disabled Active</Nav.Link></Nav.Item>
</Nav.List>
</Nav.Root>

Props

Nav.Root

이름	타입	기본값	설명
`label`	`string`	`-`	스크린 리더 사용자에게 네비게이션의 목적을 설명하는 접근성 레이블입니다.
`direction`	`'horizontal'` \| `'vertical'`	`'horizontal'`	네비게이션 메뉴가 가로 또는 세로 방향으로 배치될지 결정합니다.
`size`	`'sm'` \| `'md'` \| `'lg'` \| `'xl'`	`'md'`	Nav.Link 의 높이·타이포그래피 크기 등을 제어합니다.
`shape`	`'fill'` \| `'ghost'`	`'fill'`	Nav.Link 의 배경 스타일을 설정합니다.
`stretch`	`boolean`	`false`	stretch 가 true 면 Nav.List 와 Nav.Item 이 가용 공간을 가득 채웁니다.
`align`	`'start'` \| `'center'` \| `'end'`	`'center'`	Nav.Link 내부 컨텐츠(아이콘+텍스트 등)의 정렬 위치를 지정합니다.
`disabled`	`boolean`	`false`	Nav.Link 를 비활성화할지 여부입니다.

Nav.List

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	리스트(ul)에 추가 클래스를 적용합니다.

Nav.Item

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	리스트 아이템(li)에 추가 클래스를 적용합니다.

Nav.Link

이름	타입	기본값	설명
`selected`	`boolean` \| `undefined`	`false`	현재 페이지와 일치하는 링크를 나타냅니다.
`disabled`	`boolean` \| `undefined`	`false`	링크를 비활성화합니다.
`href`	`string` \| `undefined`	`-`	링크 대상 URL 입니다.

Nav.LinkItem

이름	타입	기본값	설명
`className`	`string` \| `undefined`	`-`	Nav.LinkItem 내부의 Nav.Link 요소에 전달할 추가 클래스를 지정합니다.

Accessibility Table

Nav WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Nav는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

개발 시 준수해야 할 내용을 명시합니다.

Props	Description
aria-label	페이지에 여러 개의 네비게이션이 있는 경우, 네비게이션의 목적을 명확하게 설명해야 합니다. 이 때, aria-label에는 navigation이란 단어를 사용하지 않습니다.
<nav aria-label="주 메뉴"> <!-- 주요 내비게이션 콘텐츠 --> </nav> <nav aria-label="푸터 링크"> <!-- 푸터 관련 링크 --> </nav>

Props

Description

aria-label

페이지에 여러 개의 네비게이션이 있는 경우, 네비게이션의 목적을 명확하게 설명해야 합니다.

이 때, aria-label에는 navigation이란 단어를 사용하지 않습니다.

<nav aria-label="주 메뉴">
  <!-- 주요 내비게이션 콘텐츠 -->
</nav>

<nav aria-label="푸터 링크">
  <!-- 푸터 관련 링크 -->
</nav>

컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.

Accessibility	Description
role="navigation"	해당 요소가 네비게이션의 역할을 수행 중임을 안내합니다.
aria-current="page"	내비게이션의 여러 링크 중에서 사용자가 현재 보고 있는 페이지를 나타냅니다.

Keyboard Interactions

Interaction	Description
Space	링크에 포커스가 있을 때 Space 키를 누르면 링크가 활성화(클릭)됩니다.

On this page