Build · New

Navigation Bar

Quick access to 3 to 5 top-level destinations at the bottom of a phone screen (up to 6 on tablets), each with an icon and a short label.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/navigation-bar

Dependencies it brings: @phosphor-icons/react

Usage

import { NavigationBar, NavigationBarItem } from "@/components/ui/navigation-bar";

<NavigationBar className="fixed inset-x-0 bottom-0">
  <NavigationBarItem href="/" icon={HouseIcon} selected>Home</NavigationBarItem>
  <NavigationBarItem href="/alerts" icon={BellIcon} badge={3} badgeLabel="new alerts">Alerts</NavigationBarItem>
</NavigationBar>

Examples

Tablet

layout="tablet": up to six destinations, the icon beside the label, a dot badge.

Auto layout and router links

The default layout="auto": the phone bar below md, the tablet bar from md. Items are <Link>s through render, and showLabels={false} hides the labels across the bar while screen readers keep them.

API reference

NavigationBar

Prop	Type	Default	Description
`layout`	`"auto" \| "phone" \| "tablet"`	`"auto"`	The phone bar, the tablet bar, or both by screen width.
`showLabels`	`boolean`	`true`	Figma's Show label for the whole bar: every label or none.
`aria-label`	`string`		The landmark's name. Default: "Main" in the page language.

NavigationBarItem

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label: one short word.
`icon`	`IconComponent`		Figma's Outline icon; drawn in the Fill weight when selected.
`selectedIcon`	`IconComponent`		Figma's Filled icon, when it isn't the same icon in the Fill weight.
`selected`	`boolean`	`false`	Figma's Selected: the page you're on.
`href / render`	`string / ReactElement`		The destination, or a router link with the item's look.
`badge`	`number \| true`		Figma's Badge: a count (Number) or `true` for a Dot.
`badgeLabel`	`ReactNode`		What the badge means, for screen readers ("new alerts").

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Through the destinations in reading order.

ARIA

A nav named "Main" in the page language, a ul, and aria-current="page" on the selected item.
Every item is 64px tall, above the 48px touch target.
Badges are read with their meaning: "3 new alerts"; a dot without a label reads "New".

Arabic and RTL notes

Mirrors

The first destination sits on the right; on tablets the icon sits to the right of the label.

Does not mirror

Icons, except directional ones (the mirror list).

Numerals: Badge counts follow the numerals setting.
Arabic typography: label-12: Regular, Medium when selected.
Mixed-direction text: Keep labels to one word; longer ones crowd the phone bar.

All components ›