Nav Tabs React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Nav Tabs is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import NavTabs from @/components/ui/nav-tabs.

"use client"

import { usePathname } from "next/navigation"
import Link from "next/link"
import { NavTabs, type NavTabsItem } from "@/components/ui/nav-tabs"
import { LinkProvider } from "@/lib/navigation"

const sections: NavTabsItem[] = [
  { label: "General", href: "/settings/general" },
  { label: "Members", href: "/settings/members", badge: 8 },
  { label: "Billing", href: "/settings/billing" },
  { label: "Integrations", href: "/settings/integrations" },
  { label: "Notifications", href: "/settings/notifications" },
  { label: "Security", href: "/settings/security" },
]

export function SettingsTabs() {
  return (
    <LinkProvider component={Link} currentPath={usePathname()}>
      <NavTabs items={sections} sticky labels={{ navigation: "Company settings" }} />
    </LinkProvider>
  )
}

Props

• items
  NavTabsItem[]

  The tabs (NavItem from lib/navigation): label, href, icon, activeIcon, badge (a number renders a count), disabled, external, match, onSelect. Children are ignored. Items without href render buttons that call onSelect.

• value
  string

  The active tab's key (id, else href, else the label). Controls the tabs; otherwise the current path decides.

• defaultValue
  string

  The first active tab when no path is known (no LinkProvider, no currentPath). Default: the first enabled item.

• onValueChange
  (key: string, item: NavTabsItem) => void

  Runs on every activation, in all three modes (controlled, routed, uncontrolled).

• currentPathdefault ""
  string

  The current pathname. Empty: the LinkProvider's. The tab whose href matches it most specifically is active and clicks store nothing. Try /setari/securitate.

• variantdefault "underline"
  "underline" | "pill" | "segmented"

  underline for page sections, pill for lighter filters, segmented for a compact switch. Class for class the tabs looks.

• sizedefault "md"
  "sm" | "md" | "lg"

  32 / 40 / 48px tabs with the matching type and icon size. On touch md grows to 44px and sm keeps its look with a 44px hit area.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The indicator color: the underline bar, the pill fill or the segmented thumb. Neutral is black in light mode and white in dark mode.

• colordefault ""
  string

  Any CSS color for the indicator; replaces the tone. Leave empty to use the tone.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The pill and segmented shapes, scaled with the size (md is 8 / 10 / 12px). The underline bar is always round.

• bordereddefault true
  boolean

  Underline only: the hairline baseline under the whole row.

• fullWidthdefault false
  boolean

  Tabs share the width equally. The usual choice for two to four segments on a phone.

• aligndefault "start"
  "start" | "center"

  Where the tabs sit when they are narrower than the row.

• stickydefault false
  boolean

  Sticks to the top of the scrolling area under the top bar (top: var(--topbar-offset, 0px), which the topbar writes) on a glass background.

• overflowdefault "scroll"
  "scroll" | "menu"

  What happens when the tabs do not fit. scroll: the row scrolls sideways with edge fades and keeps the active tab in view. menu: the last tabs fold into a More menu (a bottom sheet on phones); the active tab never folds.

• moreLabeldefault "More"
  string

  The label of the overflow trigger and the accessible title of its bottom sheet on phones.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for this instance (next/link's Link). Default: the LinkProvider's, else a plain anchor.

• labels
  { navigation?: string }

  The nav landmark's accessible name, default "Sections". An aria-label or aria-labelledby on the component wins.

• classNames
  Partial<Record<"list" | "link" | "indicator" | "badge" | "icon" | "more", string>>

  Extra classes for the inner parts: the list, every link, the indicator, badge and icon wrappers, the More trigger.

• className
  string

  Extra classes for the nav root, merged last. Set --bar-bg here when sticky tabs sit on a surface other than the page.

FAQ

More React navigation components