# TabsNavLink

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

Source: https://ui.jcsoftdev.com/docs/components/tabs-nav-link

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/navigation-tabsnav--default)
- [Keyboard Uses Native Links](/storybook/?path=/story/navigation-tabsnav--keyboard-uses-native-links)
- [As Child With Router Link](/storybook/?path=/story/navigation-tabsnav--as-child-with-router-link)
- [Render Link](/storybook/?path=/story/navigation-tabsnav--render-link)
- [Active Override](/storybook/?path=/story/navigation-tabsnav--active-override)
- [Follows The Current Page](/storybook/?path=/story/navigation-tabsnav--follows-the-current-page)
- [Default](/storybook/?path=/story/navigation-tabs--default)
- [With Counts](/storybook/?path=/story/navigation-tabs--with-counts)
- [Disabled Tab](/storybook/?path=/story/navigation-tabs--disabled-tab)
- [Controlled](/storybook/?path=/story/navigation-tabs--controlled)
- [Narrow](/storybook/?path=/story/navigation-tabs--narrow)

## Source

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