LinkTabs

Looks like Tabs but each tab is a link to another page. Pick it for section navigation that changes the address.

LinkTabs

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, LinkTabs

Dark theme, LinkTabs

High contrast theme, LinkTabs

UsageLink to the section Usage

tsx

import { LinkTabs } from '@skribly/ui/navigation'

tsx

<LinkTabs label="Project navigation" currentId="list" items={[
  { id: 'board', label: 'Board', href: '/p/board' },
  { id: 'list', label: 'List', href: '/p/list' }
]} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A nav landmark with plain links, so Tab moves through them and the browser keeps history.
The current page has aria-current="page" and an underline, never colour alone.
Client routing works through RouterProvider.

This demo runs through axe in all three themes on every test run. See what the tests check.