Navigation Bar

Switches between three to five top-level destinations of an app, at the bottom of the screen on phones.

Stable

Web

iOS

Android

@advui/core

Source

Four destinations with badges

Preview

Code

HomePick a destination below.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { NavigationBar } from '@advui/core'
import { BellIcon, HomeIcon, SearchIcon } from '@advui/icons'

<NavigationBar value={tab} onValueChange={setTab} aria-label="Main">
  <NavigationBar.Item value="home" icon={<HomeIcon />} label="Home" />
  <NavigationBar.Item value="search" icon={<SearchIcon />} label="Search" />
  <NavigationBar.Item value="inbox" icon={<BellIcon />} label="Inbox" badge={3} />
</NavigationBar>

API reference

NavigationBar

Prop	Type	Default	Description
`value`	`string`	—	The current destination.
`defaultValue`	`string`	—	Starting `value` when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Called with the item the user picks; navigate here.
`aria-label`	`string`	—	Names the navigation landmark, e.g. “Main”.

NavigationBar.Item

Prop	Type	Default	Description
`value` required	`string`	—	Unique value.
`icon` required	`ReactNode`	—	Destination icon.
`label` required	`string`	—	Always visible.
`badge`	`number \| boolean`	—	A count (99+ above 99) or a dot. Announced as “Inbox, 3 new”.
`render`	`ReactElement`	—	Web: your router’s link, e.g. `<Link href="/inbox" />`.
`disabled`	`boolean`	`false`	Not selectable.

Accessibility

On web a nav landmark whose items are buttons (or your links) with aria-current="page" on the current one.
On iOS and Android a tab bar: items are tabs with a selected state, so screen readers say “Inbox, tab, 2 of 4, selected”.
Badges are part of the item’s name (“Inbox, 3 new”); the visual bubble is hidden from screen readers.
The current destination is shown by the pill, color and bolder label together.

Keyboard interactions
Key	Action
`Tab`	Moves between destinations.
`Enter / Space`	Opens the focused destination.

Responsive behavior

Items share the width equally. On tablets and desktop, a side navigation usually fits better.

Platform notes

Web

Keep it fixed at the bottom of mobile layouts; use render with your router’s link.

iOS

Add the bottom safe-area inset as padding so it clears the home indicator.

Android

Can replace Expo Router’s default tab bar through its tabBar option. With androidRipple (on in material()), presses show the native ripple.

Since v0.2.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousMenubar

NextNavigation Menu