什么是导航组件？
导航是网站的重要组成部分，用于帮助用户在网站的不同部分之间导航。
Bootstrap 5 提供了多种导航组件：
- 基本导航
- 导航栏（Navbar）
- 标签页（Tabs）
- 胶囊导航（Pills）
- 面包屑导航（Breadcrumb）
- 分页（Pagination）
这些组件都经过精心设计，具有响应式特性，可以在各种设备上良好工作。
导航组件演示
这是一个基本导航示例。Bootstrap 5 提供了多种导航样式和变体。
其他导航组件
面包屑导航
使用 .breadcrumb 类显示当前页面在网站结构中的位置：
<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>分页导航
使用 .pagination 类创建分页导航：
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>步骤指示器
使用自定义样式创建步骤指示器：
<ul class="nav nav-pills custom-nav">
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="badge bg-primary rounded-circle me-2">1</span>
基本信息
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="badge bg-secondary rounded-circle me-2">2</span>
详细信息
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="badge bg-secondary rounded-circle me-2">3</span>
确认信息
</a>
</li>
</ul>带下拉菜单的导航
在导航中添加下拉菜单：
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">产品</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">产品类别1</a></li>
<li><a class="dropdown-item" href="#">产品类别2</a></li>
<li><a class="dropdown-item" href="#">产品类别3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">所有产品</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
</ul>导航设计最佳实践
选择合适的导航类型
- 使用导航栏作为网站主导航
- 使用面包屑导航显示当前位置
- 使用分页导航处理大量内容
- 使用步骤指示器引导用户完成多步流程
响应式设计
- 确保导航在所有设备上可用
- 使用
navbar-expand-*类控制折叠断点 - 测试导航在移动设备上的可用性
- 考虑触摸设备上的交互体验
可访问性
- 为导航添加适当的ARIA属性
- 确保键盘导航正常工作
- 为屏幕阅读器提供清晰的导航结构
- 使用高对比度颜色确保可读性
用户体验
- 保持导航结构简单直观
- 使用清晰的标签和描述
- 提供视觉反馈（如活动状态）
- 考虑用户完成任务所需的步骤