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.