Tab Nav

since 1.2

⚠️ Deprecated — use Tabs with variant="line" instead.

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

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

TabNav
TabNavLink

Props

`<TabNavLink>`

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

When not to use it

Don't use Tab Nav in new work — it is deprecated. Use Tabs with <TabsList variant="line"> instead, which gives the same underline-indicator treatment with the keyboard behaviour and ARIA wiring of the Radix tabs primitive; reach for Tab Nav only while migrating an existing screen.

Examples

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

Switch Table

On This Page

Example Install Components Props <TabNavLink>When not to use it Examples Disabled Tabs

Contribute