Resources
Intro & Anatomy
Breadcrumbs are secondary navigation patterns that help users understand website hierarchy and navigate back through different levels.
Use breadcrumbs on sites with clear hierarchical structures, e.g. documentation sites, e-commerce categories, or multi-level content.
Breadcrumbs display the current page's location within the navigational hierarchy, with each level separated by visual dividers showing the path from homepage to current page.
Options & Styles
Sizes
MDX breadcrumbs come in two sizes:
Small and large for different interface requirements.
Breadcrumb Types
Homepage displayed as either home icon or text label
Breadcrumb level shows navigational levels with hover states
Truncated level shortens long labels when space is limited
Breadcrumb title displays the current page as non-interactive text
Best Practice & Usage
Breadcrumbs should provide clear hierarchical context whilst remaining concise and easy to navigate. Use breadcrumbs only when they add genuine navigational value to the user experience.
Breadcrumbs serve as secondary hierarchical navigation to help users easily navigate a website. Keep breadcrumb labels short and under 7 levels.
Don't use over 7 levels of breadcrumbs to help users navigate better. Truncate breadcrumb levels when there are too many or insufficient space.
You can display a home icon instead of text to refer to the homepage.
Only use icons for homepage links. Don't use icons in any other levels.
Truncate longer labels when horizontal space is limited or titles are too long.
Avoid wrapping labels, opt to truncate instead.
Always keep the last breadcrumb label as a text instead of a link.
Don't link to external sites in breadcrumbs, use inline or standalone links instead.
Use header navigation patterns on mobile devices for better usability.
Avoid displaying breadcrumbs on mobile devices where space is limited.
Theming
You can customise colours, font styles and spacings to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.