breadcrumbs

Breadcrumbs

Breadcrumbs are a way-finding tool that helps users understand where they are within an application, while also offering an easy way to navigate "up" to higher level pages.

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs>
  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
</d2l-breadcrumbs>

Best Practices

• Structure breadcrumbs around information architecture rather than the user's browsing history
• Keep breadcrumbs short and sweet; it's okay to simplify language in a breadcrumb

• Don't repeat the current page name in the breadcrumb
• Avoid displaying more than one breadcrumb control on a page
• Don't use breadcrumbs as a stepper, see Wizards instead

Breadcrumbs [d2l-breadcrumbs]

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs>
  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
</d2l-breadcrumbs>

Properties

Property	Type	Description
compact	Boolean	Renders in compact mode, displaying only the last item

Breadcrumb (child) [d2l-breadcrumb]

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs>
  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
</d2l-breadcrumbs>

Properties

Property	Type	Description
text	String, required	The text of the breadcrumb link
aria-label	String	ARIA label for the breadcrumb, used if text does not provide enough context for screen reader users
href	String	The Url that breadcrumb is pointing to
target	String	Target of the breadcrumb item

Current Page [d2l-breadcrumb-current-page]

Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs>
  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
</d2l-breadcrumbs>

Responsive Behavior

Breadcrumbs that overflow their container will appear to fade at the edge, as in this example:

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs>
  <d2l-breadcrumb text="Table of Contents" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Unit 1: Shakespeare" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Lesson 1: Introduction" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Sub-lesson 3: The Breadth of Shakespearean Literature" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="The Comedies, Tragedies, Histories, and Other Long Words" href="#"></d2l-breadcrumb>
</d2l-breadcrumbs>

Limited Width

Set a max-width to constrain breadcrumbs to a particular width:

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs style="max-width: 250px">
  <d2l-breadcrumb text="Trucate Basic Item 1" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
</d2l-breadcrumbs>

Compact Mode

Alternately, add the compact attribute to only display the last breadcrumb. The d2l-breadcrumb-current-page will be hidden:

<script type="module">
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
  import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
</script>
<d2l-breadcrumbs compact>
  <d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
  <d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
</d2l-breadcrumbs>

Accessibility

Breadcrumbs adhere to W3C's Breadcrumbs Pattern, so they are contained in a navigation landmark region with proper aria labelling and add aria-current to the final breadcrumb if it represents the Current Page.

Note that we do not apply a visited style to breadcrumbs, since they reflect tool hiearchy and are part of the UI rather than part of the page content.