Navigation Component

• Top-level destinations that need to be accessible anywhere in an app
• Three to seven main destinations in a product
• Tablet or desktop layouts (Material Design (opens in a new tab))

• Small screen sizes
• Single tasks, such as viewing a single email
• Secondary navigation destinations (Material Design (opens in a new tab))

The active indicator can be a background shape or an underline with brighter color communicating which destination of the navigation bar is currently being displayed. It can let user know which part is being shown.

Use the active indicator only for the active destination. Don't use the active indicator for more than one destination at a time (Material Design (opens in a new tab))

The labels in the navigation bar provides short, meaningful descriptions of navigation destinations. Labels should be short enough to not be truncated. Additionally, the type scale should not be reduced to fit longer text labels. (Material Design (opens in a new tab))

Attach an aria-label attribute to your navigation to give users of assistive technology as much information as possible (especially if there are multiple navigations on your site).

You can also use the semantic <nav> tag around your unordered list and links with an ARIA role='navigation' attribute. (Carnegie Museums of Pittsburgh (opens in a new tab))

• You should uses conventional locations for menus, such as across the top of the page or along the left side.
• Provide generous sizes for clickable areas, generally no smaller than 44px by 44px.
• Provide clear styles for hover and current states. Menus often do not have styles for visited states. (Yale University (opens in a new tab))

When applying icons in the navigation bar, a label text should also be provided as an alternative way for users to understand an icon's meaning. It is important for usability and accessibility. You should show labels at all times and avoid using icons without labels. (Material Design (opens in a new tab))