NavigationBar

Stable
WCAG 2.2 evidence
RTL
Web · iOS · Android

The bottom bar of a mobile layout: a named nav landmark with a list of three to five NavItems. Use it below the md breakpoint in place of the Sidebar: render only one of the two at a time and hide the other with display: none (md:hidden here, hidden md:flex there), which also removes its landmark. Every item is a link (aria-current="page") or a button, 44 pt (iOS) or 48 dp (Android) tall, with an always visible label (WCAG 1.1.1, 2.4.4, 2.5.8). The bar keeps clear of the home indicator through the safe-area insets, and shrinks its items so five fit a 320 px screen (1.4.10). Tab moves through the items in order (2.4.3). Position is yours: usually fixed inset-x-0 bottom-0 (with viewport-fit=cover in the viewport meta tag so the insets apply) and bottom padding on the page equal to the bar's height so content is never covered. Consumer duties: a unique landmark name, no more than five destinations, isCurrent on exactly one item.

import { NavigationBar } from "@nexera-ui/react";

Loading example…

6
examples: 4
props: 2
live controls: 3
platforms: 8
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

platform

Generated code

import { NavigationBar } from "@nexera-ui/react";

<NavigationBar />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

Android

Figma Platform=Android: 12 px top padding and the pill behind the selected icon.

Loading example…

app.tsx

import { NavItem, NavigationBar } from "@nexera-ui/react";
import { LuBell, LuClipboardCheck, LuEllipsis, LuHouse, LuUsers } from "react-icons/lu";

function Items() {
  return (
    <>
      <NavItem href="#home" icon={<LuHouse />} label="Home" isCurrent />
      <NavItem
        href="#approvals"
        icon={<LuClipboardCheck />}
        label="Approvals"
        badge="3"
        badgeLabel="3 pending"
      />
      <NavItem href="#team" icon={<LuUsers />} label="Team" />
      <NavItem href="#inbox" icon={<LuBell />} label="Inbox" />
      <NavItem href="#more" icon={<LuEllipsis />} label="More" />
    </>
  );
}

export function Android() {
  return (
    <NavigationBar aria-label="Main">
      <Items />
    </NavigationBar>
  );
}

Three items

Three destinations spread over the bar (justify-between).

Loading example…

app.tsx

import { NavItem, NavigationBar } from "@nexera-ui/react";
import { LuEllipsis, LuHouse, LuUsers } from "react-icons/lu";

export function ThreeItems() {
  return (
    <NavigationBar aria-label="Main (three)">
      <NavItem href="#home" icon={<LuHouse />} label="Home" isCurrent />
      <NavItem href="#team" icon={<LuUsers />} label="Team" />
      <NavItem href="#more" icon={<LuEllipsis />} label="More" />
    </NavigationBar>
  );
}

Narrow width

A 320 px column: five items shrink from 72 px to fit, and a long label wraps.

Loading example…

app.tsx

import { NavItem, NavigationBar } from "@nexera-ui/react";
import { LuBell, LuClipboardCheck, LuEllipsis, LuHouse, LuUsers } from "react-icons/lu";

export function NarrowWidth() {
  return (
    <div className="max-w-xs">
      <NavigationBar aria-label="Main (narrow)">
        <NavItem href="#home" icon={<LuHouse />} label="Home" isCurrent />
        <NavItem href="#leave" icon={<LuClipboardCheck />} label="Leave requests" />
        <NavItem href="#team" icon={<LuUsers />} label="Team" badge="12" badgeLabel="12 new" />
        <NavItem href="#inbox" icon={<LuBell />} label="Inbox" />
        <NavItem href="#more" icon={<LuEllipsis />} label="More" />
      </NavigationBar>
    </div>
  );
}

Long labels

Long translated labels wrap; the bar grows in height instead of truncating them.

Loading example…

app.tsx

import { NavItem, NavigationBar } from "@nexera-ui/react";
import { LuClipboardCheck, LuHouse, LuUsers } from "react-icons/lu";

export function LongLabels() {
  return (
    <div className="max-w-sm">
      <NavigationBar aria-label="Hauptnavigation" platform="android">
        <NavItem href="#home" icon={<LuHouse />} label="Startseite" isCurrent />
        <NavItem href="#genehmigungen" icon={<LuClipboardCheck />} label="Genehmigungen" />
        <NavItem href="#team" icon={<LuUsers />} label="Mitarbeiterverzeichnis" />
      </NavigationBar>
    </div>
  );
}

Right to left

Right to left: the items run from the right and the badges move to the other corner.

Loading example…

app.tsx

import { NavItem, NavigationBar } from "@nexera-ui/react";
import { LuClipboardCheck, LuHouse, LuUsers } from "react-icons/lu";

export function RightToLeft() {
  return (
    <NavigationBar aria-label="التنقل الرئيسي">
      <NavItem href="#home" icon={<LuHouse />} label="الرئيسية" isCurrent />
      <NavItem
        href="#approvals"
        icon={<LuClipboardCheck />}
        label="الموافقات"
        badge="٣"
        badgeLabel="٣ قيد الانتظار"
      />
      <NavItem href="#team" icon={<LuUsers />} label="الفريق" />
    </NavigationBar>
  );
}

Props 4

Press "Try it" on a card to load that prop into the playground.

children*Nexera

ReactNode

Three to five NavItem elements. Each is wrapped in a list item, so a screen reader announces "list, 5 items".

platformNexera

"web" | "ios" | "android"

Platform look: top padding, and the look of every NavItem inside. Takes the NexeraProvider's platform when omitted. web has no Figma set and renders the iOS look.

aria-labelNexera

string

Accessible name of the navigation landmark, for example "Main" or "Primary". Required: a page with several nav landmarks needs a unique name for each. Translate it. Accessible name when it must differ from the visible text.

aria-labelledbyNexera

string

Id(s) of visible element(s) that name the landmark; wins over aria-label. Id(s) of visible element(s) that name the landmark.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.1Bypass BlocksLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<NavigationBar className="shadow-sm" />

Theme studio

NavigationBar

Try every prop. Copy the code.

Examples 5

Android

Three items

Narrow width

Long labels

Right to left

Props 4

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components