TabNav

Name: Rad UI
Author: Rad UI Team

Link-based tab navigation for page-level routing. Unlike Tabs, TabNav uses anchor elements so each tab corresponds to a URL.

Overview Settings Members Billing

React
"use client"

import { useState } from "react"
import TabNav from "@radui/ui/TabNav"

const TabNavExample = () => {
    const [activeTab, setActiveTab] = useState('overview')

    return (
        <TabNav.Root value={activeTab} onValueChange={setActiveTab}>
            <TabNav.Link value="overview" href="#overview">Overview</TabNav.Link>
            <TabNav.Link value="settings" href="#settings">Settings</TabNav.Link>
            <TabNav.Link value="members" href="#members">Members</TabNav.Link>
            <TabNav.Link value="billing" href="#billing" disabled>Billing</TabNav.Link>
        </TabNav.Root>
    )
}

export default TabNavExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import TabNav from "@radui/ui/TabNav"

export default () => {
    return (
        <TabNav.Root value="tab1" onValueChange={() => {}}>
            <TabNav.Link value="tab1" href="#tab1" />
            <TabNav.Link value="tab2" href="#tab2" />
        </TabNav.Root>
    )
}

Root

The root TabNav container.

Prop	Type	Default
className	string	""

Link

A tab link that navigates to a URL.

Prop	Type	Default
href*	string	--
active	boolean	false
className	string	""