Breadcrumbs

Code

HTML

<nav>
    <ol id="breadcrumb" class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Research & Analysis</a></li>
        <li><a href="#">Enterprising Investor</a></li>
        <li class="current-page">Opportunity Cost of Screening in Socially Responsible Investing</li>
    </ol>
</nav>
                

Documentation

Problem Being Solved

We need a way to provide context within the site's navigation hierarchy.

When To Use

Breadcrumbs should appear on every page at and below the L3 level.

When Not To use

We do not show the breadcrumb on the home page or on L2 pages.

Formatting

  • This code should be placed between the nav/account HTML and the <main> content element.
  • Every page but the current page is linked.
  • Truncate after the first five words of a page title.