Tab Nav

탭 스타일로 꾸며진 링크로 이루어진 내비게이션 메뉴예요.

출처: 문서

본문

페이지 안에서 여러 섹션 사이를 이동할 때 사용하는 탭 모양의 내비게이션 링크 메뉴예요.

<TabNav.Root>
  <TabNav.Link href="#" active>
    Account
  </TabNav.Link>

  <TabNav.Link href="#">Documents</TabNav.Link>

  <TabNav.Link href="#">Settings</TabNav.Link>
</TabNav.Root>

이 컴포넌트는 Navigation Menu primitive를 기반으로 하며, 공통 margin props를 지원해요.

Root

내비게이션 메뉴 링크들을 감싸요.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	No default value
`justify`	`Responsive<"start" \| "center" \| "end">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Link

개별 내비게이션 메뉴 링크예요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`active`	`boolean`	`false`

예시 (Examples)

Size

size prop으로 탭의 크기를 제어할 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root size="1">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root size="2">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

Color

color prop으로 탭 목록에 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="indigo">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="cyan">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="orange">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="crimson">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높일 수 있어요.

<Flex direction="column" gap="4" pb="2">
  <TabNav.Root color="gray">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root color="gray" highContrast>
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>

With router links

asChild prop으로 TabNav.Link를 앱의 라우터 링크 컴포넌트와 함께 구성할 수 있어요.

<TabNav.Root>
  <TabNav.Link asChild active={pathname === "/account"}>
    <NextLink href="/account">Account</NextLink>
  </TabNav.Link>

  <TabNav.Link asChild active={pathname === "/documents"}>
    <NextLink href="/documents">Documents</NextLink>
  </TabNav.Link>

  <TabNav.Link asChild active={pathname === "/settings"}>
    <NextLink href="/settings">Settings</NextLink>
  </TabNav.Link>
</TabNav.Root>

더 알아보기 (Learn more)

라우터 링크와 결합할 때는 asChild를 사용해 앱의 링크 컴포넌트와 자연스럽게 통합할 수 있어요.