Component

TabNav

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

View component changelog

preview

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. Renders a <nav> landmark.

Prop	Type	Default
value	string	--
defaultValue	string	--
onValueChange	(value: string) => void	--
orientation	'horizontal' \| 'vertical'	'horizontal'
loop	boolean	true
aria-label	string	--
className	string	""

Link

A tab link that navigates to a URL.

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

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus into or out of the navigation landmark. When a current link is set, focus enters on that link.
`ArrowRight`	Moves focus to the next enabled link in horizontal orientation. In right-to-left direction, moves to the previous enabled link.
`ArrowLeft`	Moves focus to the previous enabled link in horizontal orientation. In right-to-left direction, moves to the next enabled link.
`ArrowDown`	Moves focus to the next enabled link in vertical orientation.
`ArrowUp`	Moves focus to the previous enabled link in vertical orientation.
`Home`	Moves focus to the first enabled link.
`End`	Moves focus to the last enabled link.
`Enter`	Activates native anchors or button-like children rendered with asChild. The merged click handler updates the selected value when a value is provided.
`Space`	Activates custom children that render a button-like element with asChild; anchors keep native browser link behavior.

ARIA References

Reference	What Rad UI follows
Navigation landmark	Root renders a native nav landmark. Provide aria-label or aria-labelledby when the page has more than one navigation region.
Link pattern	Links use native anchor semantics and expose the current route with aria-current="page". Without asChild, disabled links expose aria-disabled and remove href; with asChild, the child controls disabled semantics.