Bootstrap 5 navbar可实现垂直后台快捷导航：需移除navbar-expand-*类，用flex-column布局；子菜单用div.collapse包裹，配合data-bs-toggle="collapse"控制展开；图标用Bootstrap Icons，激活态通过JS匹配pathname前缀并存localStorage；移动端用offcanvas替代隐藏，确保快捷入口不丢失。
用 Bootstrap 5 的 navbar 实现后台快捷导航，别套默认样式
后台菜单栏不是官网示例那种顶部横条，得垂直、可折叠、带图标和权限分组——navbar 组件能用，但必须绕开 navbar-expand-* 类的响应式横排逻辑。直接加 flex-column + 手动控制展开状态，比硬塞 navbar-nav 更可控。
常见错误是把 nav-link 套在 dropdown-item 里导致点击无反馈，或用 data-bs-toggle="collapse" 绑定到非 div.collapse 元素上导致 JS 不触发。
- 用
<nav class="navbar bg-dark"></nav>作容器，去掉所有navbar-expand-* - 子菜单用
<div class="collapse"> 包裹，父级 <code><button></button>加data-bs-toggle="collapse"和对应data-bs-target - 图标优先用
<i class="bi bi-grid"></i>（需引入 Bootstrap Icons），别用 background-image，否则缩放和暗色模式下易糊 - 权限隐藏项不要仅靠
display: none，后端也要过滤 DOM 输出，避免敏感路径被爬出 - 给每级
<button></button>加唯一id，对应子collapse的id，避免多个菜单互相干扰 - 用
document.querySelectorAll('a.nav-link[href]')遍历设active，别只设location.pathname === link.href，要支持startsWith()匹配前缀路径 - 折叠状态存在 localStorage 里，键名用菜单 ID + “-collapsed”，防止刷新丢失展开状态
- 触发按钮放
<header></header>内，加data-bs-toggle="offcanvas"和data-bs-target="#sidebarOffcanvas" -
offcanvas内部结构复用 sidebar 的 HTML，但去掉所有navbar-类，改用list-group或纯div布局 - 用
@media (min-width: 992px)把offcanvas设为display: block !important并取消 backdrop，实现“桌面展开、移动抽屉”效果 - 给
nav-link加class="d-flex align-items-center p-3"，图标用<i class="me-2"></i>控制右间距 - 折叠按钮整个
<button></button>加data-bs-toggle="collapse"，别只绑在内部图标上 - 箭头图标用
<i class="ms-auto text-muted"></i>放右侧，配合transition: transform 0.2s和.show > .bi-chevron-down { transform: rotate(180deg); }做旋转动画
sidebar-nav 里怎么处理多级嵌套和激活态同步
Bootstrap 官方不支持三级以上折叠，collapse 只认一级目标。要实现「系统设置 → 用户管理 → 角色列表」这种路径，得手动监听 shown.bs.collapse 事件，再递归展开上级 collapse。
激活态（active 类）不能只靠 URL 匹配，后台菜单常有 tab 切换或 iframe 加载，得用 JS 主动设：检查当前页面 window.location.pathname，匹配 nav-link 的 href 属性（注意末尾 / 和参数差异）。
移动端适配时，侧边栏收起后怎么保证快捷入口不消失
后台用户在平板上仍需快速跳转，不能像前台那样整个 sidebar display: none。正确做法是用 offcanvas 替代 sidebar 隐藏逻辑，保留一个固定位置的触发按钮（比如左上角三横线），点开才拉出完整菜单。
别把 offcanvas 和 navbar 混用——offcanvas 自带 backdrop 和键盘关闭，而 navbar 默认没这些，强行合并会导致 ESC 键失效或遮罩层错位。
图标文字对齐错位、子菜单箭头点击区域太小的问题怎么修
Bootstrap 5 的 nav-link 默认行高和 padding 是为文字设计的，加图标后容易上下偏移；折叠箭头用 <i class="bi-chevron-down"></i> 默认是 inline 元素，点击热区只有图标本身，用户实际想点整行。
别用 vertical-align: middle 硬调图标，它依赖父元素 line-height，暗色模式下更难控。直接给图标加 align-text-top 或用 flex 布局重置。
最麻烦的是折叠菜单的过渡高度——collapse 默认用 max-height 动画，但子项高度不固定时会卡顿。真要丝滑，得用 height: auto + JS 测量真实高度再设内联 style，这个细节多数人会忽略，结果就是菜单一弹一弹的。
