(Sample)

以下のサンプルではBootstrap 5のパンくずリストを用いて、ユーザーがサイト内のどの位置にいるかを示すナビゲーションを提供しています。

2つの異なるパンくずリストがあり、それぞれが異なるページ階層を示しています。

また、aria-labelaria-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-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>

最後までお読みいただきありがとうございます。