Startify-UI

パンくずリスト

Startify-UIで提供されるパンくずリストのコンポーネントです。

パンくずリスト （矢印区切り）

パンくずリスト（矢印区切り）のコンポーネントにはsu-breadcrumbもしくはsu-breadcrumb-arrowのクラス名を付与します。

ol要素などのリスト要素を用いてマークアップします。所定のクラス名を付与することでスタイルが適用されます。itemscope、itemtype、itemprop属性を用いてMicrodata（schema.org）方式に対応させます。区切り文字は矢印とスラッシュが提供されており、デフォルトでは矢印になります。

ウェブサイト内で現在のページまでの階層にあわせてリンクをリストにしたものを指します。ユーザーに対してサイト内のどのページにアクセスしているのかをわかりやすく伝え、サイト内のアクセスを容易にし、検索エンジンのクロールをサポートします。 

<nav aria-label="パンくずリスト">
  <ol class="su-breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/parent/">
        <span itemprop="name">親階層ページ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/parent/child/" aria-current="page">
        <span itemprop="name">子階層ページ</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

パンくずリスト （スラッシュ区切り）

パンくずリスト（スラッシュ区切り）のコンポーネントにはsu-breadcrumb-slashのクラス名を付与します。

マークアップなどは矢印区切りのパンくずリストと同様です。

<nav aria-label="パンくずリスト">
  <ol class="su-breadcrumb-slash" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/parent/">
        <span itemprop="name">親階層ページ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/parent/child/" aria-current="page">
        <span itemprop="name">子階層ページ</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

アクセシビリティの支援

パンくずリストのコンポーネントではアクセシビリティの対応として、aria-label属性が設定されたnav要素でマークアップを行い、現在のページを示す要素には、aria-current="page"の属性を付与します。 

<nav aria-label="パンくずリスト">
  <ol class="su-breadcrumb-slash" itemscope itemtype="https://schema.org/BreadcrumbList">

    ...

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/parent/child/" aria-current="page">
        <span itemprop="name">Current Page</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>