Components
Accordion
Alert Dialog
Aspect Ratio
Avatar
Badge
Bottomsheet
Breadcrumb
Button
Calendar View
Callout
Card
Carousel
Checkbox
Checkbox Group
Checkbox Cards
Combobox
Context Menu
Data List
Dialog
DataGrid
Datepicker
Dropdown Menu
File Upload
Hover Card
Icon Button
Input
Input Card Number
Input Mask
Input Number
InputOTP
Input Phone Number
Input RRN
Inset
Pagination
Popover
Progress
Radio
Radio Group
Radio Cards
Rating
Resizable
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Toast
Text Area
Text Field
Tooltip
TreeView
Components
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>
API Reference
이 컴포넌트는 Navigation Menu primitive를 기반으로 하며 common margin props를 지원합니다.
Root
Contains the navigation menu links.
| 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
An individual navigation menu 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>