The idea is to show the user the series of links they went through to end up where they are, and not to create a list of pages. For example, this user went from the 'Home' page, from which they went to the 'Documentation' page, from which they went to the 'Components' page, from which they went to the 'Breadcrumbs' page. Using the breadcrumb, they can see the path they followed, as well as click on a link to return to any of the pages they came from.
To add a basic breadcrumb, use the following code:
<div class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li><p>Breadcrumbs</p></li>
</ul>
</div>
Here, the <li><a href="#">...</a></li> sections define active links, and the <li><p >...</p></li> define the current page (i.e. a non-active text item). In each case, you must have either the <a> or the <p> tags for proper function.
For larger sites with a deeper hierarchy, breadcrumbs could get very lengthy. Therefore, breadcrumbs will automatically scroll if the content is too much to fit into a line:
Breadcrumbs, unlike other elements, work well outside of a container:
When placed outside of a container, they are particularly useful at the top of a page (directly below the navbar), so that they are the first thing a user sees.