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 -->