component-topicpath

echo-topicpath

トピックパス(パンくずリスト、ページ階層ナビゲーション)を前提とした外観に変更する。.echo-nav.echo-nav-horizontal を包括し、体裁が以下の通り変更される。

  • リストの最終行が太字になる
  • リンクの間に階層を示す > が表示される
  • .echo-nav-label の左右余白が 0 となる

一般にはやや小さく表示されることが多いため、このサンプルコードでは .echo-nav-sm.echo-nav-fixed を付与している。

モバイル端末等でリストが画面の幅よりも長くなった場合は、右側にスクロール(スワイプ)を促すフェードアウトが表示される。

schema.orgの構造化データに対応したマークアップをする場合は、リンク内のテキストにも要素が必要となる。例では .echo-topicpath-name を付与している。

Internet Explorer 11では、間のシェブロン(before擬似クラスで生成したもの)が変形して上にずれる。対応する場合は背景画像等で代替すること。

一般的なトピックパス

画面幅を超えるほど長いトピックパス

ウィンドウ幅を縮めて、スクロールを促すインターフェースが表示されることを確認してください。

<div class="echo-topicpath">
    <div class="echo-topicpath-inner">
        <nav class="echo-nav echo-nav-horizontal echo-nav-sm echo-nav-fixed">
            <ol class="echo-nav-list" itemscope itemtype="http://schema.org/BreadcrumbList">
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="/" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">ホーム</span></a>
                    <meta itemprop="position" content="1">
                </li>

                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="/styleguide/" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">Styleguide</span></a>
                    <meta itemprop="position" content="2">
                </li>

                <li class="echo-nav-item is-current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <span class="echo-nav-label"><span class="echo-topicpath-name" itemprop="name">component-topicpath</span></span>
                    <meta itemprop="position" content="3">
                </li>
            </ol>
        </nav><!-- /.echo-nav -->
    </div><!-- /.echo-topicpath-inner -->
</div><!-- /.echo-topicpath -->

<p class="echo-title echo-title-level-4 m-style-a echo-margin-top-lg echo-margin-bottom-sm">画面幅を超えるほど長いトピックパス</p>

<p class="echo-margin-bottom-lg">ウィンドウ幅を縮めて、スクロールを促すインターフェースが表示されることを確認してください。</p>

<div class="echo-topicpath">
    <div class="echo-topicpath-inner">
        <nav class="echo-nav echo-nav-horizontal echo-nav-sm echo-nav-fixed">
            <ol class="echo-nav-list" itemscope itemtype="http://schema.org/BreadcrumbList">
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="#" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">リストの一番目</span></a>
                    <meta itemprop="position" content="1">
                </li>
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="#" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">リストの二番目です</span></a>
                    <meta itemprop="position" content="2">
                </li>
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="#" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">リストの三番目はタイトルが長いです</span></a>
                    <meta itemprop="position" content="3">
                </li>
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="#" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">リストの四番目</span></a>
                    <meta itemprop="position" content="4">
                </li>
                <li class="echo-nav-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <a href="#" class="echo-nav-label" itemprop="item"><span class="echo-topicpath-name" itemprop="name">リストの五番目もタイトルが長いです</span></a>
                    <meta itemprop="position" content="5">
                </li>
            </ol>
        </nav><!-- /.echo-nav -->
    </div><!-- /.echo-topicpath-inner -->
</div><!-- /.echo-topicpath -->