Skip to content
JSON Resume Styleguide
GitHub

Navigation

Tab navigation

Tabs that are links: moving between sibling pages of one area.

import { TabNav, TabNavLink } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Profile area
tab-nav/profile.tsx
import { TabNav, TabNavLink } from '@jsonresume/ui';

// Each tab is a real page. With Next.js: <TabNavLink asChild><Link href=… /></TabNavLink>.
export default function TabNavProfile() {
  return (
    <TabNav label="Profile">
      <TabNavLink href="#dashboard" active>
        Dashboard
      </TabNavLink>
      <TabNavLink href="#jobs">Jobs</TabNavLink>
      <TabNavLink href="#timeline">Timeline</TabNavLink>
      <TabNavLink href="#ats">ATS score</TabNavLink>
      <TabNavLink href="#letter">Cover letter</TabNavLink>
    </TabNav>
  );
}

Usage

Do

  • Use when each tab has its own URL.

Don’t

  • Use for panels inside one page: use Tabs, which manage focus between panels.

Accessibility

  • A named nav landmark; the current page sets aria-current="page".

Props

<TabNav>

Also accepts the attributes of the element TabNav renders.
PropTypeDefaultDescription
label requiredstring–Names the navigation, e.g. "Profile".

<TabNavLink>

Also accepts the attributes of the element TabNavLink renders.
PropTypeDefaultDescription
activebooleanfalse
asChildbooleanfalse