TabsNav

Tab-looking sub-navigation made of links. Unlike Tabs it has no panels and no tab roles: each item is a real link, the current one carries aria-current="page", and the router is yours (href, renderLink or asChild). The strip is flush to its container’s inline edges and scrolls sideways when the items do not fit.

Import

import { TabsNav } from "@jcsoftdev/ui/navigation";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/navigation/tabs.

Usage

<TabsNav aria-label="Student sections" value="grades">
  <>
          <TabsNavLink value="summary" href="#summary">
            Summary
          </TabsNavLink>
          <TabsNavLink value="grades" href="#grades" count={8}>
            Grades
          </TabsNavLink>
          <TabsNavLink value="attendance" href="#attendance">
            Attendance
          </TabsNavLink>
        </>
</TabsNav>

Props

Prop	Type	Default	Description
aria-label *	string		Name of the strip (required: a page can have several navigations).
value	string		Value of the item that is the current page.
renderLink	((props: TabsNavLinkRenderProps) => ReactNode)		Renders every link with your router’s component instead of an <a>: renderLink={(props) => <Link to={...} {...props} />}. An item’s own asChild wins.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Keyboard Uses Native Links
• As Child With Router Link
• Render Link
• Active Override
• Follows The Current Page

Source

packages/ui/src/navigation/tabs/tabs-nav.tsx