Pepulux Playbook

Bottom Navigation

Mobile-style bottom tab bar with icon + label. Use on narrow viewports as the primary navigation.

import{ BottomNavigation } from "@pepulux/ui"

Default

Icons only (no labels)

Props

PropTypeDefaultDescription
items*BottomNavItem[]—Array of { value, label, icon, badge? }
valuestring—Currently active tab value
onChange(value: string) => void—Called on tab change
showLabelsbooleantrueToggle label text visibility
Application component → Application navigationwww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Primary destinations on mobile

Bottom navigation puts three to five top-level destinations within thumb reach. Each item needs an icon and a short label, and exactly one is active at a time.

Do

  • Use it for top-level sections only

Don't

  • Use it for actions — that is what a floating action button is for