Skip to content
Components / Navigation

Nav tabs

Links styled as tabs, for the sections of one record.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { NavTabs, NavTab } from "@fabrials/ui";

API reference

Prop / exportTypeDescription
labelstringNames the navigation.
currentbooleanThe section on screen (aria-current=page).
countnumber | stringOptional count after the label.
renderReactElementThe host's link element.

Behavior

Each tab is a URL. Use Tabs when the panels live on the same page.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.