Skip to main content

Breadcrumb

The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.

Example images of breadcrumb component with fewer and more links:

    <section class="breadcrumb-block">
<div class="container">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<ul itemscope itemtype="https://schema.org/BreadcrumbList" class="list-unstyled">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="#item.Url">
<span itemprop="name">For residents</span>
<meta itemprop="position" content="1" />
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="#item.Url">
<span itemprop="name">Streets and travel</span>
<meta itemprop="position" content="2" />
</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
Bus passes (Travelcard)
</li>
</ul>
</nav>
</div>
</section>
    <section class="breadcrumb-block">
<div class="container">
<div class="breadcrumb-bar">
<ul itemscope itemtype="https://schema.org/BreadcrumbList" class="list-unstyled is-flex-wrap">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="https://www.bristol.gov.uk/residents" >
<span itemprop="name">For residents </span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="https://www.bristol.gov.uk/schools-learning-early-years">
<span itemprop="name">Schools, learning and early years </span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="https://www.bristol.gov.uk/schools-learning-early-years/school-admissions">
<span itemprop="name">School admissions </span>
</a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemtype="https://schema.org/WebPage" itemprop="item" href="https://www.bristol.gov.uk/schools-learning-early-years/secondary-admissions">
<span itemprop="name">New year 7 secondary school place</span>
</a>
<meta itemprop="position" content="4" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
Application timetable for new year 7 secondary school place
</li>
</ul>
</div>
</div>
</section>