TabsNav

TabsNav is the navigation counterpart of Tabs: the same tab strip, but each item is a link to a route and the page content is rendered by the router instead of a tab panel. Use Tabs when panels switch in place on one page.

Pass your router’s link component via render:

<TabsNavLink render={<NavLink to="/communications/folders" />}>
  Folders
</TabsNavLink>

Basic usage

Code

import { TabsNav, TabsNavLink } from "@falcon/ui-kit";

export function Example() {
  return (
    <TabsNav aria-label="Communications">
      <TabsNavLink href="#folders" aria-current="page">
        Folders
      </TabsNavLink>
      <TabsNavLink href="#campaigns">Campaigns</TabsNavLink>
      <TabsNavLink href="#templates">Templates</TabsNavLink>
    </TabsNav>
  );
}

Line

Code

import { TabsNav, TabsNavLink } from "@falcon/ui-kit";

export function Example() {
  return (
    <TabsNav variant="line" aria-label="Communications">
      <TabsNavLink href="#folders" aria-current="page">
        Folders
      </TabsNavLink>
      <TabsNavLink href="#campaigns">Campaigns</TabsNavLink>
      <TabsNavLink href="#templates">Templates</TabsNavLink>
    </TabsNav>
  );
}

Overflow

A row that does not fit its container scrolls horizontally and fades the clipped edge. It initially brings the active link into view.

Code

import { TabsNav, TabsNavLink } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:max-w-sm">
      <TabsNav aria-label="Account">
        <TabsNavLink href="#overview">Overview</TabsNavLink>
        <TabsNavLink href="#orders">Orders</TabsNavLink>
        <TabsNavLink href="#bookings" aria-current="page">
          Bookings
        </TabsNavLink>
        <TabsNavLink href="#invoices">Invoices</TabsNavLink>
        <TabsNavLink href="#statements">Statements</TabsNavLink>
        <TabsNavLink href="#agronomy">Agronomy</TabsNavLink>
        <TabsNavLink href="#permissions">Permissions</TabsNavLink>
      </TabsNav>
    </div>
  );
}

Accessibility

Give TabsNav an aria-label when the page has more than one navigation landmark.

API

TabsNav

Tab-styled links for switching between router-rendered pages; use Tabs when panels switch in place. A row that does not fit its container scrolls horizontally, bringing the active link into view when it changes.

Props

style

style?: React.CSSProperties

Applied to the scrolling content inside the navigation element.

variant

variant?: "line" | "default" | null = "default"

Changes only appearance, not behavior. Defaults to "default".

TabsNavLink

Renders a tab link as an <a> element and accepts standard <a> props. Use render to replace the element. Active state comes from aria-current="page" on the rendered link; most router link components set it automatically.

Props

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.