Bottom Navigation
Shifting Bottom Navigation - CSS Only
Material Design Shifting Bottom Navigation
Navigation Specifications & Conditions
- Navigation Height: 56px standard for bottom navigation.
- Items: Each nav item has an icon (24px) and a label (12px).
- Active Item: Icon scales 1.2x, label fully visible, primary color (#007bff).
- Inactive Item: Icon muted gray (#666), label hidden (icons-only).
- Padding:
- Active view: 6px above icon, 10px below text
- Inactive view: 16px above and below icon
- Shifting Animation: Label smoothly appears for active item.
- Responsive: Adjust icon/text size for smaller screens; layout adapts.
- Ripple Effect: Click feedback using CSS transform.
- Number of Items Conditions:
- 3 items: always show labels for all items
- 4-5 items: icons-only for inactive items, label shown for active
- Accessibility: Keyboard focusable, labels & icons distinguish active/inactive state.