Components

Breadcrumbs

Breadcrumbs are to be used on pages to indicate where a user currently is on their journey on a webpage and show the route they have taken to get there, so they are able to go back.

Example

                                
                                <ul class="breadcrumbs"><li class="breadcrumbs__linkitem"><a href="http://sites.southglos.gov.uk/digital-design-manual" title="South Gloucestershire Council">Home</a></li><li class="breadcrumbs__linkitem breadcrumbs__linkitem--active">Breadcrumbs</li></ul>

Portal Code example

  • This is included via liquid tags on web templates
  • Breadcrumbs should not be on transactional journeys.
                        
                        <ul class="breadcrumb">
<li><a href="/" title="Home">Home</a></li>
<li><a href="/" title="Address book">Address book</a></li>
<li class="active">Add address</li>
</ul>

When to use this

Use the breadcrumb component when you need to help users understand where they are and move between the multiple levels of a website.

When not to use this

Don’t use the breacrumb component on websites with a flat structure, or to show progress through a linear journey (use the progress bar component) or transaction.

You should not use this during the process of a transaction once they have started their service.

Back to top