A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
.s-breadcrumbs: root class for <nav> (major nav) or <ol> (other nav).s-breadcrumbs-via-ul: alternate root class for <ul> (not recommended)ⓘ Notice
A scope class is used to enforce appropriate semantic HTML.
ⓘ Notice
The markup uses embedded Breadcrumb microdata.
| Class & Markup | Description | Notes |
|---|---|---|
nav.s-breadcrumb ol |
Major navigation | |
ol.s-breadcrumb |
Other navigation | |
div.s-breadcrumb ul |
Major navigation (Inaccurate markup) | Use when markup cannot be changed. |
<dl>
<dt>Major Navigation</dt>
<dd>
<nav class="s-breadcrumbs">
<ol>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Home</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a>Fruit</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Tropical</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Yellow</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
Bananas
</li>
</ol>
</nav>
</dd>
<dt>Other Navigation</dt>
<dd>
<ol class="s-breadcrumbs">
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Home</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a>Fruit</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Tropical</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Yellow</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
Bananas
</li>
</ol>
</dd>
</dl>
<hr />
<dl>
<dt><em>Deprecated</em> Major Navigation</dt>
<dd>
<div class="s-breadcrumbs-via-ul">
<ul>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Home</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a>Fruit</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Tropical</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a href="#">Yellow</a>
</li>
<li itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
Bananas
</li>
</ul>
</div>
</dd>
</dl>
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "trumps"
}