TabsNavLink

TabsNavLink is part of the Navigation set, imported from @jcsoftdev/ui/navigation.

Import

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

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

Usage

<TabsNavLink 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>
        </>
</TabsNavLink>

Props

Prop	Type	Default	Description
value *	string		Matches the strip’s value to mark this item as the current page.
active	boolean		Overrides the match for routers that report the active state themselves.
count	number		Optional record count shown after the label.
asChild	boolean	false	Renders the single child element (a router Link) with the item’s look and a11y props.
children *	ReactNode

* 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
• Default
• With Counts
• Disabled Tab
• Controlled
• Narrow

Source

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