🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

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.

Example

"use client"

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

export function TabNavDefault() {
  return (
    <TabNav>
      <TabNavLink href="#" active>
        Overview
      </TabNavLink>
      <TabNavLink href="#">Projects</TabNavLink>
      <TabNavLink href="#">Settings</TabNavLink>
      <TabNavLink href="#" 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>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`disabled`	`boolean`	-

Examples

"use client"

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

export function TabNavDefault() {
  return (
    <TabNav>
      <TabNavLink href="#" active>
        Overview
      </TabNavLink>
      <TabNavLink href="#">Projects</TabNavLink>
      <TabNavLink href="#">Settings</TabNavLink>
      <TabNavLink href="#" 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>
  )
}

Styling

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

Additional Classes

Other CSS classes used by this component:

disabled
tab-nav-item
tab-nav-link
tab-nav-list
tab-nav-title

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI navigation-menu Documentation

Switch Table

On This Page

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

Contribute