Tab Nav

A horizontal navigation component that displays links in a tab-like interface.

TabNav provides a clean, organized way to present navigation options in a horizontal row with tab-like styling. Unlike Tabs which switch between content panels, TabNav is used for page-level navigation where each item typically links to a different page or section. It's commonly used in application headers, settings panels, or anywhere horizontal navigation with tab aesthetics is needed.

Built on top of Radix UI's NavigationMenu primitive with keyboard navigation support (Arrow keys to move between items, Enter/Space to activate), focus management, and accessibility features including proper ARIA attributes.

Registry Component: This component is available from the Strongtie registry. Add it using: npx shadcn@latest add @strongtie/tab-nav

Example

"use client"

import { TabNav, TabNavLink } from "@/components/ui/tab-nav"

export function TabNavDefault() {
  return (
    <TabNav>
      <TabNavLink href="/overview" active>
        Overview
      </TabNavLink>
      <TabNavLink href="/projects">Projects</TabNavLink>
      <TabNavLink href="/settings">Settings</TabNavLink>
      <TabNavLink href="/disabled" disabled>
        Disabled
      </TabNavLink>
    </TabNav>
  )
}

Installation

Add this component from the Strongtie registry:


npx shadcn@latest add @strongtie/tab-nav

Or by URL:


npx shadcn@latest add https://design.strongtie.io/r/tab-nav.json

Usage

import { TabNav, TabNavLink } from "@/components/ui/tab-nav"

Components

This module exports the following components:

TabNav
TabNavLink

Props

`<TabNavLink>`

Prop	Type	Default	Description
`active`	`boolean`	-	Marks the link as active with a bottom border indicator and foreground text.
`asChild`	`boolean`	-	Render as a child element instead of an anchor, for use with routers.
`disabled`	`boolean`	-	Disables the link, preventing interaction and reducing opacity.

Examples

Default

"use client"

import { TabNav, TabNavLink } from "@/components/ui/tab-nav"

export function TabNavDefault() {
  return (
    <TabNav>
      <TabNavLink href="/overview" active>
        Overview
      </TabNavLink>
      <TabNavLink href="/projects">Projects</TabNavLink>
      <TabNavLink href="/settings">Settings</TabNavLink>
      <TabNavLink href="/disabled" disabled>
        Disabled
      </TabNavLink>
    </TabNav>
  )
}

Disabled

"use client"

import { TabNav, TabNavLink } from "@/components/ui/tab-nav"

export function TabNavDisabled() {
  return (
    <TabNav>
      <TabNavLink href="#" active>
        Overview
      </TabNavLink>
      <TabNavLink href="#">Analytics</TabNavLink>
      <TabNavLink href="#" disabled>
        Reports (Disabled)
      </TabNavLink>
      <TabNavLink href="#">Settings</TabNavLink>
    </TabNav>
  )
}

Tabs (Stateful)

Use onClick to manage active state locally instead of navigating to a URL.

Active tab: Overview

"use client"

import { useState } from "react"
import { TabNav, TabNavLink } from "@/components/ui/tab-nav"

const tabs = ["Overview", "Projects", "Settings"] as const

export function TabNavTabs() {
  const [activeTab, setActiveTab] = useState<string>("Overview")

  return (
    <div>
      <TabNav>
        {tabs.map((tab) => (
          <TabNavLink key={tab} asChild active={activeTab === tab}>
            <button type="button" onClick={() => setActiveTab(tab)}>
              {tab}
            </button>
          </TabNavLink>
        ))}
      </TabNav>
      <div className="text-muted-foreground p-4 text-sm">
        Active tab: {activeTab}
      </div>
    </div>
  )
}

Multi Select Tree

On This Page

Example Installation Usage Components Props <TabNavLink>Examples Default Disabled Tabs (Stateful)

Contribute