Skip to content

LinkTabs

Route tabs: links that look like Tabs. Each tab is its own URL, so they work without JavaScript and keep history.

LayoutServer-rendered

Examples

Server sections

Mark the tab for the current route with current.

Light
Dark
Example
<LinkTabs
  label="Server sections"
  items={[
    { href: '/servers/sentry', label: 'Overview', current: true },
    { href: '/servers/sentry/tools', label: 'Tools', count: 18 },
    { href: '/servers/sentry/activity', label: 'Activity' },
    { href: '/servers/sentry/settings', label: 'Settings' },
  ]}
/>

Inside a page header

Pass LinkTabs to PageHeader tabs so it sits directly under the header.

pdf-forms

Fill and flatten PDF forms.

Example
<PageHeader
  title="pdf-forms"
  description="Fill and flatten PDF forms."
  tabs={
    <LinkTabs
      label="Skill sections"
      items={[
        { href: '/skills/pdf-forms', label: 'Instructions' },
        { href: '/skills/pdf-forms/files', label: 'Files', count: 3, current: true },
      ]}
    />
  }
/>

Usage

Usage
import { LinkTabs } from '@switchboard/ui'

<LinkTabs
  label="Server sections"
  items={[
    { href: routes.server.href({ id }), label: 'Overview', current: page === 'overview' },
    { href: routes.serverTools.href({ id }), label: 'Tools', count: tools.length, current: page === 'tools' },
  ]}
/>

Props

Every component also takes mix, for css() and mixins applied after its own style.

LinkTabs

LinkTabs props
PropTypeDefaultDescription
label*string–Accessible name of the <nav> ("Server sections").
items*{ href: string; label: string; count?: number | string; current?: boolean }[]–One link per tab. href is also the key, so keep them unique.

Also accepts every <nav> attribute.

Accessibility

  • A <nav> named by label, holding a list of plain links. No tab roles: these are links and behave like links.
  • The current tab has aria-current="page".
  • Works before and without JavaScript; Back and Forward move between tabs.

Guidance

Do

  • Use LinkTabs when each section is a separate page you can link to.
  • Mark exactly one tab as current.

Don’t

  • Use LinkTabs to switch content in place; use Tabs.
  • Mix LinkTabs and Tabs in the same header.