Why Breadcrumb Navigation Still Matters: Design Tips & Best Practices

Breadcrumb navigation is a long‑standing UI component that offers many user benefits with minimal design cost, and extensive research confirms its feasibility.

What Is a Breadcrumb?

Breadcrumbs, named after the Hansel and Gretel story, provide a return path for users navigating a website or application.

Breadcrumb Styles

Common styles include using the ">" character for clear forward paths; styles 1 and 2 are both acceptable, while styles 3‑7 are extensions that can be chosen based on business scenarios.

Breadcrumbs on Mobile

Breadcrumbs are not a mobile‑only feature, but adding them on mobile often costs more than it benefits users, affecting visual layout and interaction. Guidelines for mobile breadcrumbs include avoiding tiny or crowded designs, preventing multi‑line breadcrumbs, and shortening the path to the last level only.

Breadcrumb Placement

Research shows placement strongly influences click frequency. Typical positions are directly below the global navigation bar or above/next to the page title; the latter can capture up to 82% of breadcrumb clicks.

Breadcrumb Types

Current designs mainly use two types: location‑based and attribute‑based. A path‑based breadcrumb, similar to a history trail, is rarely used and not recommended for navigation because it can confuse users deep in a site.

Design Considerations

Using a left‑pointing arrow aligns with the original intent of breadcrumbs. Recommendations include keeping mobile and desktop experiences consistent, reducing visual redundancy, and ensuring breadcrumbs do not dominate the page layout.

When to Use Breadcrumbs

Breadcrumbs are appropriate for sites with three or more hierarchical levels and tightly related functional modules where content structures are independent and non‑crossing.

Summary & Recommendations

Breadcrumb navigation reduces the number of clicks needed to reach a target page, helping prevent users from leaving. It occupies little space, so it should generally be included. Design recommendations:

Do not replace global navigation or local navigation.

Start the breadcrumb path with a link to the homepage; only the current page should be non‑clickable.

Use breadcrumbs for large, multi‑level sites or complex products (three or more levels).

Ensure breadcrumbs do not visually overwhelm the page; use short names or auto‑folding.

Place breadcrumbs at the top‑left of the screen, above or beside the page title.

References

https://www.nngroup.com/articles/breadcrumbs/

https://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html

https://arco.design/docs/spec/breadcrumb

https://ant.design/components/breadcrumb-cn/?theme=compact

https://element-plus.gitee.io/zh-CN/component/breadcrumb.html