A breadcrumb is a navigation system that reveals to the site visitor their location within a website.
- Handle: @breadcrumb--interior
- Variants (8): Campus , Homepage , Homepage (with parent) , Interior , Interior (with parent) , Landing page , Calendar - Springfield , Calendar - West Plains
- Preview:
- Filesystem Path: src/components/03-page-elements-and-patterns/navigation-elements/breadcrumb/breadcrumb.hbs
- Referenced by (42): @foundation, @foundation--campus-alert, @foundation--homepage, @foundation--homepage-alert, @foundation--homepage-with-parent, @foundation--homepage-with-parent-alert, @foundation--interior, @foundation--interior-alert, @foundation--interior-with-parent, @foundation--interior-with-parent-alert, @foundation--mlp, @foundation--mlp-alert, @springfield, @springfield--campus-alert, @springfield--homepage, @springfield--homepage-alert, @springfield--homepage-with-parent, @springfield--homepage-with-parent-alert, @springfield--interior, @springfield--interior-alert, @springfield--interior-with-parent, @springfield--interior-with-parent-alert, @springfield--mlp, @springfield--mlp-alert, @springfield-col-test--campus, @springfield-col-test, @springfield-col-test--homepage, @springfield-col-test--homepage-with-parent, @springfield-col-test--interior-with-parent, @springfield-col-test--mlp, @west-plains, @west-plains--campus-alert, @west-plains--homepage, @west-plains--homepage-alert, @west-plains--homepage-with-parent, @west-plains--homepage-with-parent-alert, @west-plains--interior, @west-plains--interior-alert, @west-plains--interior-with-parent, @west-plains--interior-with-parent-alert, @west-plains--mlp, @west-plains--mlp-alert
<nav class="breadcrumb-new" aria-label="Breadcrumb" role="navigation">
<div id="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<ol>
<li class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
<a href="#" itemprop="item">
<span itemprop="name">Campus</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
<a href="#" itemprop="item">
<span itemprop="name">Section (subsite)</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li class="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Page title</span>
<meta itemprop="position" content="4" />
</li>
</ol>
</div>
</nav>
<nav class="breadcrumb-new" aria-label="Breadcrumb" role="navigation">
<div id="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<ol>
<li class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
<a href="{{campus.url}}" itemprop="item">
<span itemprop="name">{{campus.name}}</span>
</a>
<meta itemprop="position" content="1" />
</li>
{{#each ancestor}}
<li class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
<a href="{{site.url}}" itemprop="item">
<span itemprop="name">{{site.name}}</span>
</a>
<meta itemprop="position" content="{{site.position}}" />
</li>
{{/each}}
<li class="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">{{page.name}}</span>
<meta itemprop="position" content="{{page.position}}" />
</li>
</ol>
</div>
</nav>
{
"campus": {
"name": "Campus",
"url": "#"
},
"page": {
"name": "Page title",
"position": 4
},
"ancestor": [
{
"site": {
"name": "Section (subsite)",
"url": "#",
"position": 2
}
}
]
}