# Breadcrumb
Breadcrumbs are a type of secondary navigation that inform users of their current location in relation to the entire site's hierarchy. The structure of the website is more easily understood when it is laid out in a breadcrumb than if it is put into a menu.
# Description
Due to constraints around space, breadcrumb patterns differ on mobile and tablet & desktop. On mobile, we show a maximum of two levels of hierarchy. The level of navigation above the users current location should be clickable and the current location should be displayed as bold text separated by with a forward slash. On desktop & tablet we show the full path in hierarchy including home, separated by a forward slash. All but the current level are clickable and styled as links.
If a user has navigated to a product by a search, the breadcrumb will be replaced by a link back to search results (i.e. show the path rather than the user position in the hierarchy)
If breadcrumbs are unavailable we hide them from the UI.
# Must include
- Page link - to direct user to the previous page.
- Separator symbol - to distinguish between each page.
- Current page heading - to indicate which page user is on.
- Maximum of 2 on mobile (web).
# Optional
Arrow icon - to direct user to previous page.
# Rules
- Clickable breadcrumb elements should be styled as links.
- Separate breadcrumb elements with a "/".
- Only show two levels maximum on mobile devices.
- Show the full breadcrumb path on large screens.
- The labels of each section should match the titles of that section.
- Don't wrap breadcrumbs on to multiple lines.
- Don't use breadcrumbs that are too small or too crowded together.