Tab Nav

Navigation between the pages of an area that looks like tabs: a <nav> of react-aria links where the current page carries aria-current="page".

NavigationoriginalMITChangelog Registry JSON

Overview

Unlike Tabs there are no panels — each item is a route — so use it for sub-pages and Tabs for in-page views.

`variant`: matches the tab styles — default (segmented on muted, the current page raised) or line (underlined).
Current item: when isCurrent is set or its href matches TabNav's currentHref (exactly, or with matchPrefix also on sub-paths).
`TabNavItem`: takes an icon before its label; `TabNavSeparator` divides groups.
Overflow: when items don't fit, the strip scrolls sideways and keeps the current page in view.

Wrap the app in react-aria's RouterProvider for client routing.

Installation

CLI

Manual

1

Register the @fma-ds namespace in components.json (once)

components.json

{  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}

2
Add the item
```
pnpm dlx shadcn@latest add @fma-ds/tab-nav
```
Files land in components/fma-ds/tab-nav.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm: class-variance-authority@^0.7.1cn@^0.5.0react-aria-components@^1.22.1
Registry: None