A breadcrumb is a navigation system that reveals to the site visitor their location within a website.
- Handle: @breadcrumb--campus
- 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
<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="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name"></span>
<meta itemprop="position" content="" />
</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": "#"
}
}