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. Built on top of Radix UI's NavigationMenu primitive with keyboard navigation support, focus management, and accessibility features.

Example

"use client"

import { TabNav, TabNavLink } from "@strongtie/design-system/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


npm install @strongtie/design-system

import { TabNav } from "@strongtie/design-system/tab-nav"

Components

This module exports the following components:

TabNav
TabNavLink

Props

`<TabNavLink>`

Prop	Type	Default	Description
`active`	`boolean`	-
`disabled`	`boolean`	-

Examples

"use client"

import { TabNav, TabNavLink } from "@strongtie/design-system/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 "@strongtie/design-system/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

Active tab: Overview

"use client"

import { useState } from "react"
import { TabNav, TabNavLink } from "@strongtie/design-system/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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

tab-nav
tab-nav-link

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Switch Table

On This Page

Example Installation Components Props <TabNavLink>Examples Disabled Tabs Styling Classes Accessibility

Contribute