A phone's navigation is not only a header. The destinations a reader moves between most often belong at
the bottom edge, where a thumb reaches them, and the header keeps the brand and the screen's own
actions. `TabBar` is that bottom half: the same destinations, the same active state and the same
substitution hook as [`Navbar`](/components/navigation/navbar).

```tsx
import { Navbar, TabBar } from "@asheeui/native";

const links = [
  { label: "Today", href: "/" },
  { label: "Workouts", href: "/workouts" },
  { label: "Nutrition", href: "/nutrition" },
];

export function Shell() {
  return (
    <>
      <Navbar brand="Pulse" links={links} />
      <TabBar items={links} />
    </>
  );
}
```

## The web needs no equivalent

The web's navigation is a bar at the top of a page with every destination visible; a second bar would
repeat it. The native package ships `TabBar` from the navbar module, on `@asheeui/native` only, so it is
not part of the umbrella. A shared shell cannot import it — that is the correct compile error — and the
native application composes it beside the shared screens.

## Props

```props TabBar
```