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 less 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>