component-step

echo-step

順番に訪問させることを目的としたナビゲーションを表示する。.echo-nav.echo-nav-vertical を包括する。
最大幅は 26rem (416px) となる。

ナビゲーションの性格上、いずれかのリンクに .is-current を付与することが前提となっている。
ol でマークアップするとリストの連番が付与される。

<p class="echo-title echo-title-style-a echo-title-level-4">olでマークアップした場合</p>

<div class="echo-step">
    <nav class="echo-nav echo-nav-vertical">
        <ol class="echo-nav-list">
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">これは最初のページです</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label is-current">現在のページです</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">タイトルの文字数がとてもすごくびっくりするほど衝撃的に多いページです。ナビゲーションとしてどうかと思います</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">吾輩は猫である名前はまだ無い</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">どこで生れたかとんと検討がつかぬ</a>
            </li>
        </ol>
    </nav><!-- /.nav -->
</div><!-- /.echo-step -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg">ulでマークアップした場合</p>

<div class="echo-step">
    <nav class="echo-nav echo-nav-vertical">
        <ul class="echo-nav-list">
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">これは最初のページです</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label is-current">現在のページです</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">タイトルの文字数がとてもすごくびっくりするほど衝撃的に多いページです。ナビゲーションとしてどうかと思います</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">吾輩は猫である名前はまだ無い</a>
            </li>
            <li class="echo-nav-item">
                <a href="#" class="echo-nav-label">どこで生れたかとんと検討がつかぬ</a>
            </li>
        </ul>
    </nav><!-- /.nav -->
</div><!-- /.echo-step -->