以下のサンプルではBootstrap 5のパンくずリストを用いて、ユーザーがサイト内のどの位置にいるかを示すナビゲーションを提供しています。
2つの異なるパンくずリストがあり、それぞれが異なるページ階層を示しています。
また、aria-labelとaria-currentのようなARIA属性を用いて、スクリーンリーダーを使用するユーザーにもパンくずリストの情報を提供しています。これにより、ウェブサイトがよりアクセシブル（利用しやすい）になります。
それぞれのパンくずリストアイテムには、リンク（a要素）または現在のページを示す非リンクテキスト（span要素）が含まれています。リンクをクリックすることで、ユーザーはその位置に移動することができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Bootstrap 5 Breadcrumb サンプル</title>
</head>
<body>
<div class="container py-5">
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
</div>
<div class="container py-2">
<h1>Bootstrap 5 Breadcrumb サンプル</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
<li class="breadcrumb-item active" aria-current="page">データ</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">写真</a></li>
<li class="breadcrumb-item active" aria-current="page">風景</li>
</ol>
</nav>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>