Radix2Solid

Tab Nav

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

<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 and supports common margin props.

Root

Contains the navigation menu links.

PropTypeDefault
sizeResponsive<"1" | "2">"2"
wrapResponsive<"nowrap" | "wrap" | "wrap-reverse">—
justifyResponsive<"start" | "center" | "end">—
colorenum—
highContrastboolean—

An individual navigation menu link.

PropTypeDefault
asChildboolean—
activebooleanfalse

Examples

Size

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

<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 to the tab list.

<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.

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

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

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>;