プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

Bootstrap4 パンくずリストの作成方法

サイトのページ遷移をわかりやすくする為に使われるパンくずリストの作成方法
 
 

■完成イメージ

 
 

【基本構文】

<nav aria-label="ラベル名">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a th:href="リンク先">親ページ名</a></li>
        <li class="breadcrumb-item" aria-current="page">子ぺージ名</li> <!-- aria-current="page"で現在のページを表す -->
    </ol>
</nav>

 
 

【使用例】

<nav aria-label="パンくずリスト">
    <ol class="breadcrumb bg-primary">
        <li class="breadcrumb-item"><a th:href="@{/menu}" class="text-white">メニュー</a></li>
        <li class="breadcrumb-item" aria-current="page">勤怠表</li>
        <li class="ml-auto">
            <form th:action="@{/logout}" method="post">
                <input type="submit" class="btn btn-outline-light" value="ログアウト">
            </form>
        </li>
    </ol>
</nav>