Usage

Navigation bars let people switch between UI views on smaller devices.

Icons inside buttons

Decorative images inside a navigation item also containing visible text are never read to the screen reader.

For example, when a screenreader encounters a “Send message” navigation item with a decorative paper airplane, the icon must be ignored.

Pitfalls

Do not rely on an image’s alternative accessibility text label to name a navigation item. Directly encode the name into the button component itself. The icon should be ignored by the screen reader.

Material guidance