Navigation

BottomNavigation

The tab bar of a mobile app: three to five destinations with icons, labels and badges.

Ant Design: TabBar (antd-mobile)

import { BottomNavigation } from '@alea/ui';

Examples

Shown inline here; it sticks to the bottom of the screen by default.

home

The tab bar of a mobile app: three to five destinations with icons and labels (MUI BottomNavigation, Ant Mobile TabBar).

Prop	Type	Default	Description
`items`required	`{ id: string; label: string; icon: ReactNode; href?: string \| undefined; badge?: number \| undefined; }[]`	-	Three to five destinations: id, label, icon, and an href (links) or none (buttons with onChange).
`value`required	`string`	-	The current destination.
`aria-label`	`string`	-	Name of the navigation. Default "Main".
`className`	`string`	-	Extra class names for the root element.
`fixed`	`boolean`	`true`	Stick to the bottom of the screen. Default true.
`onChange`	`((id: string) => void)`	-	Called with the id of the destination picked.

A nav landmark of links or buttons; the current one has aria-current and badges are read as "3 new".

Key	Does
`Tab`	Moves between destinations
`Enter`	Goes to the destination

Don't