- Home /
- Component /
- Breadcrumb /
- UX Text
Breadcrumb
A breadcrumb is a secondary navigation showing the website hierarchy.
UX text
Default in desktop
The breadcrumb should be the same as the heading, or if lacking of heading the menu title, on the page it represent. The last breadcrumb is the page you are currently on. If the heading is very long and we have decided to make it shorter in the menu title then use the menu title as the breadcrumb title.
Breadcrumb Guidelines
Default breadcrumbs on desktop
- The breadcrumb should match the page's heading.
- If there is no heading, use the menu title.
- The last breadcrumb represents the current page.
- If the heading is very long and shortened in the menu title, use the menu title as the breadcrumb.
Web page mobile
In mobile views, only the previous page's heading is displayed as the breadcrumb.
The apps (native)
In our apps, we have the same pattern for breadcrumbs as for the mobile view. But, since each page typically features a navbar with a title there may not be enough space for a long text like the previous heading. In such cases, use "Back" instead. If there is no room for even the word "Back," display only the back arrow. Ensure that TalkBack/VoiceOver reads the previous page's title for accessibility.
(Show examples of when it’s the previous page heading, when it says back and when it doesn’t have a text)
Default breadcrumbs on desktop
- The breadcrumb should match the page's heading.
- If there is no heading, use the menu title.
- The last breadcrumb represents the current page.
- If the heading is very long and shortened in the menu title, use the menu title as the breadcrumb.
Web page mobile
In mobile views, only the previous page's heading is displayed as the breadcrumb.
The apps (native)
In our apps, we have the same pattern for breadcrumbs as for the mobile view. But, since each page typically features a navbar with a title there may not be enough space for a long text like the previous heading. In such cases, use "Back" instead. If there is no room for even the word "Back," display only the back arrow. Ensure that TalkBack/VoiceOver reads the previous page's title for accessibility.
(Show examples of when it’s the previous page heading, when it says back and when it doesn’t have a text)