Bottom Navigation Bar
Component Detail
User Interface
low complexity
Shared Component
mobile
0
Dependencies
2
Dependents
0
Entities
0
Integrations
Description
Persistent bottom navigation shell with five tabs (Home, Contacts, Add, Work, Notifications) rendered consistently across Peer Mentor and Coordinator roles. Serves as the primary navigation hub for the mobile app and is shared across all screen-bearing features.
bottom-navigation-bar
Responsibilities
- Render five navigation tabs with role-appropriate semantic labels and icons
- Maintain selected tab state and handle tab switching via BLoC navigation events
- Meet WCAG 2.2 AA touch target requirements (minimum 24x24 CSS pixels per tab)
- Provide semantic accessibility labels and ARIA-equivalent Flutter semantics for screen reader support
Interfaces
build(BuildContext context) → Widget
onTabSelected(int index) → void
setActiveTab(int index) → void
getTabForRoute(String route) → int
Relationships
Dependents (2)
Components that depend on this component