Navigation Bar

navigation

Navigation bars let people switch between UI views on smaller devices. They are fixed to the bottom of the screen.

Properties

Name Type Required Default Description
activeIndex number - - Index of the currently active tab

Accessibility

Role: navigation
Keyboard Support:
  • Tab - Move focus to bar
  • ArrowLeft/Right - Navigate between items
  • Enter/Space - Activate item
Screen Reader Notes: Bar should have aria-label. Active item should have aria-current="page". Icons need accessible labels.

LLM Context

Intent: Provide primary navigation on mobile devices
Anti-Patterns:
  • Bar without aria-label
  • More than 5 destinations
  • Using bar on tablet/desktop
  • Items without icons
  • Long labels that truncate
Example Usage: 
<md-navigation-bar><md-navigation-tab active><md-icon slot="icon">home</md-icon>Home</md-navigation-tab><md-navigation-tab><md-icon slot="icon">explore</md-icon>Explore</md-navigation-tab><md-navigation-tab><md-icon slot="icon">account_circle</md-icon>Profile</md-navigation-tab></md-navigation-bar>