ui:breadcrumb

汎用的なBreadcrumbsコンポーネントです。

• WAI-ARIA Authoring Practices の Breadcrumb Pattern に準拠しています。
• schema.org の BreadcrumbList Microdata に対応しています。

Examples

Source Code

<nav class="ui:breadcrumb" aria-label="パンくずリスト">
  <ol class="ui:breadcrumb__list" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="ui:breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="ui:breadcrumb__label" itemprop="item" href="/">
        <span itemprop="name">TOP</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="ui:breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="ui:breadcrumb__label" itemprop="item" href="#">
        <span itemprop="name">Aページ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="ui:breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span class="ui:breadcrumb__label">
        <span itemprop="name">Bページ</span>
      </span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>