Skip to contentAsheeUIAsheeUI

TabBar

The device's bar of destinations at the edge a thumb reaches.

Native

The React Native renderer, with the platform's behaviour.

Native only

Install

npm install @asheeui/native

Import

import { TabBar } from "@asheeui/native";

The destinations at the bottom edge, where a thumb reaches them.

The name exists only in the native renderer; the umbrella does not carry it.

  • The native application places it below PageContent; the header keeps the brand and the screen actions.
  • It is native-only: the web already has its destinations in the top bar.

Read the React Native guide for installation, styling and the platform's behaviour outside a single component.

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.

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