Navigation Bars
Navigation bars (bottom navigation) provide access to primary destinations at the bottom of the screen on mobile devices. They enable quick switching between top-level views.
Overview
Bottom navigation bars are a Material Design component optimized for mobile devices. They display three to five destinations at the bottom of the screen, each represented by an icon and optional text label. This pattern keeps primary navigation accessible with one-handed use.
Live Preview
Navigation Bar with Labels
With Badge Indicators
In Mobile Context
Content Area
Brand Properties
The following table shows Navigation Bar properties with Material Design 3 defaults and brand-specific values.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Container Color | Color | #FEF7FF | #FFFFFF | #FFFFFF |
| Active Indicator Color | Color | #E8DEF8 | primary/20% | primary/20% |
| Active Icon Color | Color | #1D192B | #038012 | #1A5129 |
| Inactive Icon Color | Color | #49454F | #6B7280 | #6B7280 |
| Container Height | Number | 80dp | 80px | 80px |
| Active Indicator Width | Number | 64dp | 64px | 64px |
| Active Indicator Height | Number | 32dp | 32px | 32px |
| Icon Size | Number | 24dp | 24px | 24px |
| Label Font | Font Family | Roboto | Open Sans | Open Sans |
| Label Size | Number | 12sp | 12px | 12px |
| Label Weight (Active) | Weight | 500 | 600 | 600 |
| Badge Color | Color | #B3261E | #DC2626 | #DC2626 |
| Elevation | Number | 3dp | 4px | 4px |
Anatomy
- Container - Full-width bar at screen bottom
- Destinations - 3-5 navigation items
- Active Indicator - Pill shape behind active icon
- Icon - Outlined when inactive, filled when active
- Label - Text below icon, always visible in MD3
- Badge (optional) - Notification dot or count
Behavior
- Always shows 3-5 destinations
- One destination is always selected
- Tapping a destination navigates immediately
- Labels are always visible (MD3 guideline)
- Hides on scroll down, shows on scroll up (optional)
Accessibility
- Use
role="navigation"on the container - Use
aria-current="page"for active destination - Provide text labels for all icons
- Ensure touch targets are at least 48x48dp
- Announce badge content to screen readers
Related Components
- Navigation Rail (tablet/desktop alternative)
- Tabs
- App Bar