A breadcrumb is a navigation system that reveals to the site visitor their location within a website.
- Handle: @breadcrumb--calendar-wp
- 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 (4): @calendar, @calendar--sgf-alert, @calendar--wp, @calendar--wp-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">Missouri State-West Plains</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li class="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">Calendar</span>
<meta itemprop="position" content="2" />
</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": "Missouri State-West Plains",
"url": "#"
},
"page": {
"name": "Calendar",
"position": 2
}
}