在本文中，我们将学习如何创建面包屑导航。面包屑是辅助导航辅助工具，可帮助用户轻松浏览网站。面包屑为您提供方向，并准确显示您在网站层次结构中的位置。
方法 1：我们将按照以下步骤仅使用 CSS 创建面包屑。此方法允许准确自定义面包屑的外观。
步骤 1：创建导航链接的 HTML 列表。
第 2 步：设置 CSS display: inline以在同一行中显示列表。
.breadcrumb-navigation > li {
display: inline;
}第 3 步：在每个列表元素后添加一个分隔符。
.breadcrumb-navigation li + li:before {
padding: 4px;
content: "/";
}例子：
HTML
GeeksforGeeks
HTML
GeeksforGeeks
输出：
方法 2：我们将按照以下步骤使用 Bootstrap 库创建面包屑。这允许人们快速创建漂亮的面包屑。
第 1 步：我们只需将aria-label=”breadcrumb” 添加到导航元素。
第 2 步：接下来我们在列表元素中添加 class=”breadcrumb-item”。
第三步：在当前列表元素中添加class=”breadcrumb-item active”。
JavaScript
例子：
HTML
GeeksforGeeks
输出：
