Breadcrumbs

Overview

Breadcrumbs help users understand their current location within a navigational hierarchy. They provide contextual awareness by showing the path from a higher-level page to the current page or content.

Breadcrumbs are an orientation aid, not a replacement for primary navigation. They are best used in interfaces with nested or hierarchical structures and are not required on all pages.

Guidelines

Dos

• Use breadcrumbs to help users orient themselves within nested navigation.
• Display breadcrumbs as a linear path from the highest level to the current page.
• Start breadcrumbs with the application landing page or top-level section.
• Make all breadcrumb items links, except for the current page.
• Use breadcrumbs consistently across similar sections of the product.

Don’ts

• Don’t use breadcrumbs as the primary or only navigation.
• Don’t use breadcrumbs for flat or single-level navigation structures.
• Don’t make the current page a clickable link.
• Don’t overload breadcrumbs with unnecessary levels.
• Don’t truncate or abbreviate breadcrumb labels in a way that reduces clarity.

Structure

Breadcrumbs should represent hierarchy one level at a time.

• Order items from highest → lowest level.
• Separate items clearly to indicate progression.
• The final item represents the current location and should be visually distinct.