component-step

c-step

順番に訪問させることを目的としたナビゲーションを表示する。.m-nav.m-nav-vertical を包括する。
ナビゲーションの性格上、いずれかのリンクに .is-current を付与することが前提となっている。
ol でマークアップするとリストの連番が付与される。

olでマークアップした場合

ulでマークアップした場合

<h3 class="u-text-lg">olでマークアップした場合</h3>

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

<h3 class="u-text-lg u-margin-top-lg">ulでマークアップした場合</h3>

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