TabNav

Server component, no client JS

ImportCopy Anchor Link

import { TabNav } from '@nizivo/react/tab-nav';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/tab-nav.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. Its links are plain <a> elements. A router link passed through render is the router's own code: on the Next.js fixture's /tab-nav page, three links through next/link load no Nizivo module and 3,302 B (gzip, Turbopack) of Next's. It is the static alternative to Tabs when every view is a URL. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { TabNav } from '@nizivo/react/tab-nav';

const STATUSES = [
  ['all', 'All orders'],
  ['unfulfilled', 'Unfulfilled'],
  ['unpaid', 'Unpaid'],
  ['open', 'Open'],
  ['archived', 'Archived'],
] as const;

export function TabNavExample(): JSX.Element {
  const status: string = 'unfulfilled';
  return (
    <TabNav.Root aria-label="Order status">
      {STATUSES.map(([value, label]) => (
        <TabNav.Link key={value} href={`?status=${value}`} current={value === status}>
          {label}
        </TabNav.Link>
      ))}
    </TabNav.Root>
  );
}

import type { ComponentPropsWithRef, JSX } from 'react';
import { TabNav } from '@nizivo/react/tab-nav';

/** Stands in for a router link (Next `Link`, React Router `Link`). */
function Link({ children, ...props }: ComponentPropsWithRef<'a'>): JSX.Element {
  return <a {...props}>{children}</a>;
}

export function TabNavRouterExample(): JSX.Element {
  return (
    <TabNav.Root aria-label="Customers">
      <TabNav.Link render={<Link href="?segment=vip" />} count={24} current>
        VIP
      </TabNav.Link>
      <TabNav.Link render={<Link href="?segment=all" />} count="1,280">
        All
      </TabNav.Link>
      <TabNav.Link render={<Link href="?segment=subscribers" />} count={311}>
        Subscribers
      </TabNav.Link>
      <TabNav.Link render={<Link href="?segment=at-risk" />} count={9}>
        At risk
      </TabNav.Link>
    </TabNav.Root>
  );
}

Other exportsCopy Anchor Link

TabNavLinkProps type

import type { TabNavLinkProps } from '@nizivo/react/tab-nav'

The props of TabNav.Link, listed above.

TabNavLinkState type

import type { TabNavLinkState } from '@nizivo/react/tab-nav'

The render state of TabNav.Link, listed above.

TabNavRootProps type

import type { TabNavRootProps } from '@nizivo/react/tab-nav'

The props of TabNav.Root, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-tab-nav, .nz-tab-nav-count, .nz-tab-nav-icon, .nz-tab-nav-label, .nz-tab-nav-link, .nz-tab-nav-sizer, .nz-tab-nav-text.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• tab-nav-link: draws the focus outline itself on keyboard focus.

In forced-colours mode these states keep a visible system colour: tab-nav-link[aria-current='page']::before (fill).

KeyboardCopy Anchor Link

Source: native <a> elements in a <nav> (tab-nav.tsx, no client code). The browser lane (test/browser/tabs.spec.tsx) checks Tab between links and the focus outline.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none