# Tab Nav

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<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

This component is based on the [Navigation Menu primitive](/primitives/docs/components/navigation-menu) and supports [common margin props](/themes/docs/overview/layout#margin-props).

### Root

Contains the navigation menu links.

| Prop                                                                                                                          | Type                                               | Default |
| ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
| `size`                                                                                                                        | `Responsive<"1" \| "2">`                           | `"2"`   |
| `wrap`                                                                                                                        | `Responsive<"nowrap" \| "wrap" \| "wrap-reverse">` | —       |
| `justify`                                                                                                                     | `Responsive<"start" \| "center" \| "end">`         | —       |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`                                             | —       |
| `highContrast`Uses a higher contrast color for the component.                                                                 | `boolean`                                          | —       |

### Link

An individual navigation menu link.

| Prop                                                                                                                                                                   | Type      | Default |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean` | —       |
| `active`                                                                                                                                                               | `boolean` | `false` |

## Examples

### Size

Use the `size` prop to control the size of the tabs.

```jsx
<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

Use the `color` prop to assign a specific [color](/themes/docs/theme/color) to the tab list.

```jsx
<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

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<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

Use the `asChild` prop to compose `TabNav.Link` with your app’s router link component.

```tsx
export default (props: { pathname: string }) => <TabNav.Root>

	<TabNav.Link asChild active={props.pathname === "/account"}>{target => target("a", {

        "href": "/account",

        children: <>Account</>

      })}</TabNav.Link>

	<TabNav.Link asChild active={props.pathname === "/documents"}>{target => target("a", {

        "href": "/documents",

        children: <>Documents</>

      })}</TabNav.Link>

	<TabNav.Link asChild active={props.pathname === "/settings"}>{target => target("a", {

        "href": "/settings",

        children: <>Settings</>

      })}</TabNav.Link>

</TabNav.Root>;
```