Why Use this Pattern
Breadcrumbs provides the user with a 'sense of place' and a relationship to the site's hiearchy and structure. This pattern is typically and naturally well understood, with the benefit is they take up very little space and convey a lot of information. Breadcrumbs display a history of sort to the user on how they landing a specific page. The user can browse back to previous pages.
What is the Solution
Show a corresponding list of pages beginning with front most page then follow the site's hierarchy. Located above the page title, this allows for users to visibly track what their location is within the application, or website they are working.
- Labels should provide continuity to the website. This is done by ensuring each tab label is styled the same.
- Apply title capitalization rules for labels in the breadcrumb.
- Current page should be layed out same as last page in breadcrumb.
- Show the labels of the sections in the hierarchical path that lead to the viewed page.
- Each label of the higher level subsections have links that lead to the respective section of the site.
- The label of the current page is at the end of the breadcrumb and is not linked.
- Each label is parted with a separating character '/'.
- The separating characters and the spaces between the links and the labels are not linked.
- The labels of each section preferably match the titles of that section.
When to Use This Pattern
Display a horizontal list of labels starting with the topmost page and continuing down the site's hierarchy to the current page. It should be reflected on every page except top most landing page. When the page is arrived at from an exterior source, such as a users' bookmarks or search engine, it provides a sense of context.
- Use when the structure of the website follows a strict hierarchical structure of similar formatted content.
- Use when the structure of the site is parsed into sections which can be divided into more subsections.
- Use when the page in question is placed fairly deep into the hierarchy of pages, and when no other form of visual navigation can show the details of the same deep level.
- Use together with navigational elements.
Do Not Use This Pattern
- For top level navigation or as the sole navigational element.
- On the main landing page.