Missouri State University Pattern Library

Breadcrumb: Basic page

There are no notes for this item.

<nav class="breadcrumb-new" aria-label="Breadcrumb" role="navigation">
    <div id="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
        <span class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
      <a href="#" itemprop="item">
        <span itemprop="name">Campus name</span>
        </a>
        <meta itemprop="position" content="1" />
        </span>
        <span class="ancestor" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
        <a href="#" itemprop="item">
          <span itemprop="name">Site name</span>
        </a>
        <meta itemprop="position" content="2" />
        </span>
        <span class="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Page name</span>
        <meta itemprop="position" content="3" />
        </span>
    </div>
</nav>
 
<nav class="breadcrumb-new" aria-label="Breadcrumb" role="navigation">
  <div id="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <span 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" />
    </span>
    {{#each ancestor}}
      <span 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}}" />
      </span>
    {{/each}}
    <span class="current-page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">{{page.name}}</span>
      <meta itemprop="position" content="{{page.position}}" />
    </span>
  </div>
</nav>
 
{
  "campus": {
    "name": "Campus name",
    "url": "#"
  },
  "page": {
    "name": "Page name",
    "position": 3
  },
  "ancestor": [
    {
      "site": {
        "name": "Site name",
        "url": "#",
        "position": 2
      }
    }
  ]
}