Breadcrumb
About
What does it do?
- Breadcrumbs help users to understand where they are within a website’s structure.
When to use it?
- When you need to help users understand and move between the multiple levels of a website.
- Always make sure that the breadcrumb is contained within a
.wmnds-containerelement. This ensures that the breadcrumb doesn't scale the size of large browser windows. - When displaying the current page within the breadcrumb, ensure that the modifier class
.wmnds-breadcrumb__link--currentis used as seen below.
When not to use it?
- When websites have flat structure
HTML markup
<nav aria-label="Main example breadcrumbs" class="wmnds-breadcrumb">
<ol class="wmnds-breadcrumb__list">
<li class="wmnds-breadcrumb__list-item">
<a href="/" class="wmnds-breadcrumb__link">
Home
</a>
</li>
<li class="wmnds-breadcrumb__list-item">
<a href="#" class="wmnds-breadcrumb__link">
Components
</a>
</li>
<li class="wmnds-breadcrumb__list-item">
<a href="#" class="wmnds-breadcrumb__link wmnds-breadcrumb__link--current" aria-current="page">
Breadcrumb
</a>
</li>
</ol>
</nav>
Nunjucks markup
{% from "wmnds/components/breadcrumb/_breadcrumb.njk" import wmndsBreadcrumb %}
{{
wmndsBreadcrumb({
items: [
{
contentText: "Components",
href: "#",
unlinkedItem: false
},
{
contentText: "Breadcrumb",
href: "#",
unlinkedItem: false
},
],
label: "Breadcrumbs",
isMobileApp: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of breadcrumbs item objects. See items below. |
| classes | string | Classes to add to the breadcrumbs container. |
| label | string | The accessibility label for the breadcrumb component. If not provided, this will default to 'Breadcrumbs' |
| isMobileApp | boolean | If true, breadcrumb will only show on devices with a screen resolution bigger than 768px |
Options for items
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the breadcrumbs item. |
| href | string | Link for the breadcrumbs item. If not specified, breadcrumb link will be automatically generated from the contentText strings from the items in the array. |
| unlinkedItem | boolean | If set to true, breadcrumbs item is a normal list item. |
Mobile app variant of breadcrumb
When developing a mobile app, if you are limited for space and need extra room then it is recommended to use the mobile app variant of the Transport for West Midlands breadcrumb component.
The mobile app version of the breadcrumb ensures that it will not show on devices with a screen width less than 768px. This means the breadcrumb will only show on devices with a screen resolution bigger than 768px.
To use the mobile app variant:
- Add the modifier class
wmnds-breadcrumb--mobile-appto the wmnds-breadcrumb element
You will most likely want to use this with the mobile variants of the header and footer patterns.
HTML markup
<nav aria-label="Mobile app example breadcrumbs" class="wmnds-breadcrumb wmnds-breadcrumb--mobile-app">
<ol class="wmnds-breadcrumb__list">
<li class="wmnds-breadcrumb__list-item">
<a href="/" class="wmnds-breadcrumb__link">
Home
</a>
</li>
<li class="wmnds-breadcrumb__list-item">
<a href="#" class="wmnds-breadcrumb__link">
Components
</a>
</li>
<li class="wmnds-breadcrumb__list-item">
<a href="#" class="wmnds-breadcrumb__link wmnds-breadcrumb__link--current" aria-current="page">
Breadcrumb
</a>
</li>
</ol>
</nav>
Nunjucks markup
{% from "wmnds/components/breadcrumb/_breadcrumb.njk" import wmndsBreadcrumb %}
{{
wmndsBreadcrumb({
items: [
{
contentText: "Components",
href: "#",
unlinkedItem: false
},
{
contentText: "Breadcrumb",
href: "#",
unlinkedItem: false
},
],
label: "Breadcrumbs",
isMobileApp: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of breadcrumbs item objects. See items below. |
| classes | string | Classes to add to the breadcrumbs container. |
| label | string | The accessibility label for the breadcrumb component. If not provided, this will default to 'Breadcrumbs' |
| isMobileApp | boolean | If true, breadcrumb will only show on devices with a screen resolution bigger than 768px |
Options for items
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the breadcrumbs item. |
| href | string | Link for the breadcrumbs item. If not specified, breadcrumb link will be automatically generated from the contentText strings from the items in the array. |
| unlinkedItem | boolean | If set to true, breadcrumbs item is a normal list item. |