Breadcrumbs

The Breadcrumbs component is a navigational aid that displays the hierarchical path or location of the current page within the website or application. It provides users with a clear visual representation of their navigation history, allowing them to quickly understand where they are within the overall structure and easily navigate back to previous pages.

Introduction

The breadcrumbs component consists of a list of linked items that represent the navigation hierarchy. Each item typically corresponds to a page or section and is displayed in sequential order, starting from the top-level page and ending with the current page. The component's design and layout are highly flexible, allowing it to adapt to various styles and requirements.

Visual representation

The component is visually presented as a horizontal list of clickable items, separated by a designated separator. The separator is usually an "slash" or a custom icon (usually a right facing caret), indicating the hierarchical relationship between the items.

The default version of the UAE Design System recommends the use of a "forward slash" as the seperator which is added by the ` .with-seperator ` and does not require you to add an element in the code structure. By adding this class, the "forward slash" will be added at the end of a link.

<nav aria-label="Breadcrumb" class="aegov-breadcrumb with-seperator">
	<ol>
		<li><a href="#">Home</a></li>
		<li><a href="#" title="Media centre">Media centre</a></li>
		<li><a href="#" title="News">News</a></li>
		<li><a href="#" title="Special">Special articles</a></li>
		<li><a href="#" title="Press release and features">Press release and features</a></li>
		<li><span aria-current="page">A really long page name that must be affected.</span></li>
	</ol>
</nav>

It is very important to note that the breadcrumb will auto truncate long text and add the seperator as default, giving you the least need to add anything additional.

Code structure

To use the breadcrumbs component, you can utilize the following code structure:

<nav aria-label="Breadcrumb" class="aegov-breadcrumb with-seperator">
	<ol>
		<li><a href="#">Index Link</a></li>
		<li><a href="#" title="Link">Link</a></li>
		<li><a href="#" title="Link">Link</a></li>
		<li><span aria-current="page">Current Page or post</span></li>
	</ol>
</nav>

An important note

It is worth noting that while breadcrumbs can enhance user experience, they're supplemental and shouldn't replace primary navigation methods. They're most effective on websites with multiple levels of categorization or informational websites with a deep hierarchy.

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Breadcrumbs with a home icon

You may want to add an icon to the first link - usually the link to the homepage. This variation showcases how you can add an icon to the first link.

<nav aria-label="Breadcrumb" class="aegov-breadcrumb with-seperator">
	<ol>
		<li><a href="#"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54a8,8,0,0,1,2.62,5.92V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>Home</a></li>
		<li><a href="#" title="Media centre">Media centre</a></li>
		<li><a href="#" title="News">News</a></li>
		<li><a href="#" title="Press release">Press release</a></li>
		<li><span aria-current="page">A really long page name that must be affected.</span></li>
	</ol>
</nav>

Custom separator

You may want to use an icon as a seperator within the breadcrumb component. Instead of the default separator, this variation utilizes custom icons between breadcrumb links, adding a unique visual appeal while maintaining clarity in the path to the current page.

The UAE Design System recommends that should you want to not use the default "forward slash" seperator, the next best alternative is the right facing caret. Anything apart from this is not recommended.

<nav aria-label="Breadcrumb" class="aegov-breadcrumb">
	<ol>
	  <li>
		<a href="#">
		  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
			<rect width="256" height="256" fill="none"/>
			<path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54a8,8,0,0,1,2.62,5.92V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
		  </svg>
		  Home
		</a>
		<svg aria-hidden="true" class="w-4 h-4 inline-block mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
		  <rect width="256" height="256" fill="none"/>
		  <polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
		</svg>
	  </li>
	  <li>
		<a href="#" title="Media centre">Media centre</a>
		<svg aria-hidden="true" class="w-4 h-4 inline-block mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
		  <rect width="256" height="256" fill="none"/>
		  <polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
		</svg>
	  </li>
	  <li>
		<a href="#" title="News">News</a>
		<svg aria-hidden="true" class="w-4 h-4 inline-block mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
		  <rect width="256" height="256" fill="none"/>
		  <polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
		</svg>
	  </li>
	  <li>
		<a href="#" title="Press release">Press release</a>
		<svg aria-hidden="true" class="w-4 h-4 inline-block mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
		  <rect width="256" height="256" fill="none"/>
		  <polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
		</svg>
	  </li>
	  <li>
		<span aria-current="page">A really long page name that must be affected.</span>
	  </li>
	</ol>
  </nav>

Microdata-enabled breadcrumbs with schema.org support

This variation of the breadcrumbs component enhances accessibility and search engine optimization by incorporating Schema.org microdata.

By using the "itemprop" and "itemscope" attributes, each breadcrumb item is associated with structured data, providing semantic meaning to search engines and assistive technologies.

<nav aria-label="Breadcrumb" class="aegov-breadcrumb with-seperator">
	<ol itemscope itemtype="https://schema.org/BreadcrumbList">
	  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="#" itemprop="item"><span itemprop="name">Home</span></a>
	  </li>
	  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="#" itemprop="item" title="Media centre"><span itemprop="name">Media centre</span></a>
	  </li>
	  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="#" itemprop="item" title="News"><span itemprop="name">News</span></a>
	  </li>
	  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a href="#" itemprop="item" title="Press release and features"><span itemprop="name">Press release and features</span></a>
	  </li>
	  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<span aria-current="page" itemprop="name">A really long page name that must be affected.</span>
	  </li>
	</ol>
</nav>

Should micro data be used?

Search engine optimization is a key element in website development. A public website must be search engine friendly. Adding micro data to a breadcrumb will increase complexity, but is absolutely necessary in some way or the other.

Some content management systems will generate the micro data in the form of a JSON object and added it to the <head> section of the code. If this is being done, you do not need to further add micro data to the HTML element.

If your content management system is not adding micro data, it is recommended to handle this in the component.

Content management system generated

Content management systems (CMS) have plugins and built in functionality to generate breadcrumbs.

For example, the popular CMS WordPress has a number of plugins to do this. The popular plugin - Yoast SEO, generates the breadcrumbs dynamically based on a number of input parameters that the user may configure within the CMS.

This plugin does not utilize the approach of using a <ul> and <li> to organise the links. Instead, it falls back to the use of <span> for each element including the seperator. Although not a standard, the default action of the plugin is to output the breadcrumb scope as a javascript object too.

The following is an example of how the UAE Design System will manage the UI when the Yoast SEO plugin would output breadcrumbs.

<nav aria-label="Breadcrumb" class="aegov-breadcrumb with-seperator">
    <span role="list">
        <span><a href="#">Home</a></span>
        <span><a href="#" title="About us">About us</a></span>
        <span><a href="#" title="The ministry">The ministry</a></span>
        <span><span aria-current="page">Our mission and vision</span></span>
    </span>
</nav>

For the purpose of an example only.

The above is only for the purpose of an example. It is not an approved layout to use.

It is here to showcase that CMS auto generated breadcrumbs can still be styled to match the design recommended by the UAE Design System.

Behaviour

A breadcrumb is a navigational aid used in user interfaces. It allows users to understand their current location within a website or application and provides a simple way to navigate back to previous sections.

When user's interact with the breadcrumb links, they should be directed to the corresponding pages or sections. The breadcrumb trail should dynamically adjust based on the user's navigation path, reflecting the most recent pages visited.

Accessibility

There are a number of features that define accessible use of breadcrumbs. It is essential to follow the attributes of accessiblity when adding breadcrumbs to websites.

The ` <nav> ` element must container the ` aria-label="Breadcrumb" ` atrribute.
Each anchor tag in the breadcrumb must contain the ` title="" ` attribute. Each breadcrumb link should have clear and descriptive text that provides context, even when read out of its surrounding content.
Semantic structure requires that the breadcrumb links must be wrapped in a ` <nav> ` element.
The current page or section, usually the last item in the breadcrumb trail, should be clearly indicated. It should typically not be a link but rather a plain text item. You must use the ` aria-current="page" ` attribute to signal the current page or step.
Visual separators are mandatory to use. However, if you opt to use a custom icon as a seperator, it is mandatory to add the ` aria-hidden="true" ` attribute to the icon element.
The text and background colors for breadcrumb links should meet the minimum contrast ratio requirements specified by WCAG (Web Content Accessibility Guidelines) to ensure readability by users with visual impairments.
Breadcrumb links should have a clear focus style. The UAE Design System auto adds the focus ring to the link elements.
While this is more about usability than accessibility, ensuring that breadcrumbs adjust well on all screen sizes.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

We recommend that all pages on a website, apart from the homepage, must include the breadcrumb component. As suggested by best practices of web design layouts, the breadcrumb component must be placed high up on the page - just before or after the title of the page.