BottomNavigation
Mobile bottom navigation bar with icon labels and active state indicators
Bottom Navigation
A bottom navigation bar for mobile-friendly navigation. Ideal as a primary navigation pattern on mobile apps and responsive layouts.
Content Area
With Badges
Show notification counts and important indicators using badge support.
Social Navigation
Use badges for unread messages or alerts.
Colors
Use semantic colors to align the navigation with your theme.
Primary (default)
Primary Color
Secondary
Secondary Color
Success
Success Color
Without Labels
Use icon-only navigation for compact layouts.
Icon Only
Variants
Switch between different visual variants for the bar.
Default
Default Variant
Filled
Filled Variant
Shifting
Shifting Variant
Practical Example: E-commerce
Combine bottom navigation with content to build a mobile shop layout.
Shop
Product Name
$99.99 • In stock
Another Product
$149.99 • Free shipping
Practical Example: Productivity
A dashboard-style layout with tasks and messages.
Dashboard
11 pendingUsage Guidelines
When to Use
- Mobile app navigation
- 3-5 primary actions
- Quick access destinations
Accessibility
- Proper tabindex management
- aria-current for active item
Performance
- Minimal re-renders
- Icon components tree-shakable
Common Mistakes
- More than 5 items
- Using on desktop without alternative
Frequently Asked Questions
Related Components
View allApplication bar with scroll effects, elevation changes, and fixed/sticky positioning
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration
Horizontal menu bar implementing nested dropdown menus with keyboard navigation, ARIA menubar pattern, and collision detection