Bottom Navigation Bar
Component Detail
User Interface
medium complexity
mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
The primary navigation widget rendering five tabs — Home, Contacts, Add, Work, and Notifications — at the bottom of the screen. Built from design tokens to ensure WCAG 2.2 AA contrast compliance, and reacts to active tab state from the Navigation State Store.
bottom-navigation-bar
Responsibilities
- Render five tab items with accessible labels and icons
- Highlight active tab based on current route
- Dispatch tab selection events to the router
- Apply design token colors, sizing, and typography
- Support screen reader semantics and reduced-motion preferences
Interfaces
build(BuildContext context)
onTabSelected(int index)
setActiveTab(int index)
getTabIcon(int index)
getTabLabel(int index)
applyAccessibilitySemantics()