Breadcrumbs

Introduction

Breadcrumbs provide navigational context and can function either as a traditional breadcrumb trail. Breadcrumbs should be placed directly above the page title, and in the same area on every page.

Variants

• Basic breadcrumb: Shows where the user is within the page hierarchy and easily return to earlier sections.
• Navigation arrows: Provide quick movement to the previous or next page, useful for flows like multi-step forms.

Interactive demo

Try the interactive demo below to explore different breadcrumb configurations.

Best practices

• Keep it simple: Use simple and clear labels for each breadcrumb item to ensure users can quickly understand their location within the site hierarchy.
• Limit the number of items: Display only the most relevant breadcrumb items to avoid overwhelming users. Typically, 3-5 items are sufficient.
• Consistent placement: Position breadcrumbs consistently across all pages, ideally above the page title, to help users quickly locate them.

Examples

Here are some examples of usage of Breadcrumbs: