Bootstrap 5 侧边栏导航

创建现代化、响应式的侧边导航系统，提升用户体验和网站导航效率。

开始学习 查看示例

侧边栏导航介绍

侧边栏导航是现代网站和应用中常见的导航模式，特别适合内容丰富的网站、管理后台和文档系统。

Bootstrap 5 侧边栏导航的特点：

  • 响应式设计，适配各种屏幕尺寸
  • 与Bootstrap导航组件完美集成
  • 支持滚动监听和活动状态高亮
  • 可自定义主题和样式
  • 支持折叠和展开状态
  • 提供丰富的图标支持

侧边栏导航通常用于组织大量导航项，提供清晰的网站结构概览。

侧边栏导航优势
空间利用

充分利用垂直空间，展示更多导航项

响应式

在移动设备上自动转换为可切换的侧边栏

可定制

轻松自定义颜色、尺寸和交互效果

基本侧边栏实现

HTML 结构

侧边栏的基本HTML结构包含标题区域和导航区域。

<div class="sidebar">
  <div class="sidebar-header">
    <h5 class="sidebar-brand">
      <i class="bi bi-bootstrap-fill"></i>
      侧边栏标题
    </h5>
  </div>
  <div class="sidebar-body">
    <nav class="sidebar-nav">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">
            <i class="bi bi-house"></i>
            <span>首页</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bi bi-person"></i>
            <span>个人资料</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS 样式

侧边栏的核心CSS样式，包括定位、尺寸和动画效果。

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  overflow-y: auto;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.sidebar-nav .nav-link {
  color: #495057;
  padding: 10px 20px;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.sidebar-nav .nav-link.active {
  background-color: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  border-left-color: #6f42c1;
}

主内容区域

主内容区域需要设置左边距，为侧边栏留出空间。

.main-content {
  margin-left: 280px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

响应式侧边栏

移动端适配

在移动设备上，侧边栏通常隐藏，通过按钮切换显示。

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
  }

  .sidebar-overlay.show {
    display: block;
  }
}

JavaScript 控制

使用JavaScript控制侧边栏的显示和隐藏。

// 移动端侧边栏切换
const mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
const sidebar = document.getElementById('mainSidebar');
const overlay = document.getElementById('sidebarOverlay');

mobileSidebarToggle.addEventListener('click', () => {
  sidebar.classList.toggle('show');
  overlay.classList.toggle('show');
});

overlay.addEventListener('click', () => {
  sidebar.classList.remove('show');
  overlay.classList.remove('show');
});

响应式导航栏

在导航栏中添加侧边栏切换按钮，方便移动端用户使用。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="btn btn-outline-primary me-2 d-lg-none" id="mobileSidebarToggle">
      <i class="bi bi-list"></i>
    </button>
    <a class="navbar-brand" href="#">网站标题</a>
  </div>
</nav>

侧边栏样式定制

颜色主题

通过CSS变量轻松自定义侧边栏的颜色主题。

:root {
  --sidebar-bg: #f8f9fa;
  --sidebar-header-bg: #ffffff;
  --sidebar-border: #dee2e6;
  --sidebar-link-color: #495057;
  --sidebar-link-hover-bg: #e9ecef;
  --sidebar-link-active-bg: rgba(111, 66, 193, 0.1);
  --sidebar-link-active-color: #6f42c1;
}

.sidebar {
  background-color: var(--sidebar-bg);
  border-right-color: var(--sidebar-border);
}

.sidebar-header {
  background-color: var(--sidebar-header-bg);
  border-bottom-color: var(--sidebar-border);
}

.sidebar-nav .nav-link {
  color: var(--sidebar-link-color);
}

.sidebar-nav .nav-link:hover {
  background-color: var(--sidebar-link-hover-bg);
}

.sidebar-nav .nav-link.active {
  background-color: var(--sidebar-link-active-bg);
  color: var(--sidebar-link-active-color);
}

深色主题

创建深色主题的侧边栏，适合夜间模式或特定设计需求。

.sidebar-dark {
  background-color: #212529;
  color: white;
}

.sidebar-dark .sidebar-header {
  background-color: #1a1d20;
  border-bottom-color: #343a40;
  color: white;
}

.sidebar-dark .sidebar-nav .nav-link {
  color: #adb5bd;
}

.sidebar-dark .sidebar-nav .nav-link:hover {
  background-color: #343a40;
  color: white;
}

.sidebar-dark .sidebar-nav .nav-link.active {
  background-color: rgba(111, 66, 193, 0.2);
  color: white;
}

主题切换

使用JavaScript实现主题切换功能。

const toggleThemeBtn = document.getElementById('toggleSidebarTheme');
const sidebar = document.getElementById('mainSidebar');

toggleThemeBtn.addEventListener('click', () => {
  sidebar.classList.toggle('sidebar-dark');

  // 更新按钮图标
  const icon = toggleThemeBtn.querySelector('i');
  if (sidebar.classList.contains('sidebar-dark')) {
    icon.classList.remove('bi-moon');
    icon.classList.add('bi-sun');
  } else {
    icon.classList.remove('bi-sun');
    icon.classList.add('bi-moon');
  }
});

高级功能

折叠侧边栏

实现可折叠的侧边栏，节省屏幕空间。

.sidebar-collapsed {
  width: 70px;
}

.sidebar-collapsed .sidebar-brand,
.sidebar-collapsed .nav-link span {
  display: none;
}

.sidebar-collapsed .nav-link {
  text-align: center;
  padding: 10px 5px;
}

.sidebar-collapsed .nav-link i {
  margin-right: 0;
}

.sidebar-collapsed + .main-content {
  margin-left: 70px;
}
const toggleCollapseBtn = document.getElementById('toggleSidebarCollapse');
const sidebar = document.getElementById('mainSidebar');

toggleCollapseBtn.addEventListener('click', () => {
  sidebar.classList.toggle('sidebar-collapsed');
});

滚动监听集成

将侧边栏与Bootstrap的滚动监听功能集成，实现导航高亮。

<body data-bs-spy="scroll" data-bs-target="#sidebarNav" data-bs-offset="100">
  <div class="sidebar">
    <nav class="sidebar-nav" id="sidebarNav">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#section1">Section 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="main-content">
    <section id="section1">...</section>
    <section id="section2">...</section>
  </div>
</body>

嵌套菜单

实现多级嵌套菜单，适合复杂的导航结构。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    <i class="bi bi-folder"></i>
    <span>多级菜单</span>
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">子菜单项 1</a></li>
    <li><a class="dropdown-item" href="#">子菜单项 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">子菜单项 3</a></li>
  </ul>
</li>

掌握侧边栏导航后，探索更多Bootstrap组件

Bootstrap 5 提供了丰富的组件库，可以帮助您构建功能完善的现代网站。

学习导航组件 查看所有组件