Maple · Navigation

Bottom Navigation

Primary navigation for mobile apps: three to five destinations pinned to the bottom of the screen, within thumb reach. The active destination gets an accent pill behind its icon and an accent label.

View in Storybook →

On a mobile screen

Light and Dark.

Good morning

3 new updates in your inbox

Good morning

3 new updates in your inbox

<BottomNav value={tab} onChange={setTab} items={[
  { id: "home", label: "Home", icon: "home" },
  { id: "inbox", label: "Inbox", icon: "bell", badge: true },
]} />

Props

PropTypeDefaultDescription
items{ id, label, icon, badge? }[]—3–5 destinations.
valuestring—Active id.
onChange(id) => void—Selection handler.

Usage

Do

  • Use 3–5 top-level destinations.
  • Always pair icons with labels.

Don't

  • Use on desktop layouts.