Navigation
Nav Tabs
The horizontal tab bar for page-level navigation, with a sliding active indicator.
The canonical horizontal tab bar for page-level navigation. Each tab owns a sliding underline indicator and a soft floating hover box. Pass the tabs array plus the activeKey of the current tab; tabs render as <button>s (call onChange) or, when a tab has an href, as route links via the YunUI Link adapter.
Import
import { NavTabs } from "@yuhuanowo/yunui";
Basic
The component is controlled — the host owns the active key. This live demo wires it to local state:
Nav tabs
As route links
When a tab supplies an href, it renders as a routing link (through the host's Link adapter) instead of a button, and aria-current="page" is set on the active one. Use this for tabs that map to real URLs:
<NavTabs
activeKey="/settings/profile"
ariaLabel="Settings"
tabs={[
{ key: "/settings/profile", label: "Profile", href: "/settings/profile" },
{ key: "/settings/team", label: "Team", href: "/settings/team" },
{ key: "/settings/billing", label: "Billing", href: "/settings/billing" },
]}
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| activeKey* | string | — | Key of the currently active tab. |
| ariaLabel | string | — | Accessible label for the tab `<nav>`. |
| className | string | — | |
| onChange | ((key: string) => void) | — | Called for button-mode (in-page) tabs. Ignored when tabs use `href`. |
| tabs* | NavTab[] | — | The tabs to render. |
Each entry in tabs is a NavTab:
| Prop | Type | Default | Description |
|---|---|---|---|
| key* | string | — | Unique key; matched against activeKey to mark the active tab. |
| label* | ReactNode | — | Tab label content. |
| href | string | — | When set, the tab renders as a route Link instead of a button. |