NAVIGATION
侧边栏导航Sidebar Nav
常驻左侧的纵向导航，按小组分区，当前项用浅色底 + 品牌色文字高亮。
效果预览
NNova Docs
开始
◈快速上手
◉安装
核心概念
▤工作流
▥触发器
开始 / 快速上手
三步接入 Nova
适合用在哪
文档站、后台管理系统、需要多层级的应用内导航。
容易踩的坑
- 嵌套超过 3 层后缩进越来越深，260px 宽度里文字被挤成两行。
- 移动端仍常驻侧栏占据 260px，应在 1024px 以下收为抽屉。
- 当前项只靠颜色区分而未设 aria-current，色弱和读屏用户无法定位所在页面。
设计提示词 · Prompt
侧边栏导航（Sidebar Nav）：固定宽度 240-260px，左侧用 1px 浅描边与内容区分隔，背景比主区浅半阶（#FCFCFD）。顶部是品牌区（小图标 + 产品名，字重 730），下面按小组分区——每区一个小号大写的灰色组标题（11px、字距 +0.09em），组内条目为 8px 内边距的圆角行，含一个 16px 图标 + 文字。当前项用浅品牌底色（#EEF2FF）+ 品牌色文字 + 650 字重。条目悬停时背景变浅灰。滚动区与品牌区分离，只有条目不滚头。
Sidebar Nav: fixed width 240-260px, separated from the content area by a 1px light stroke on the left, background half a step lighter than the main area (#FCFCFD). A brand area at the top (small icon + product name, font-weight 730), followed by grouped sections — each section has a small uppercase gray group heading (11px, letter-spacing +0.09em), and items within are rounded rows with 8px padding containing a 16px icon + text. The current item uses a light brand background (#EEF2FF) + brand-color text + 650 weight. Items get a light gray background on hover. The scroll area is separate from the brand area, so only the items scroll and the header stays put.
常见搭配
同一页面里经常和「侧边栏导航」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-sidenav">
<div class="d-sidenav__rail">
<div class="d-sidenav__brand"><span class="d-av d-av--sm d-av--sq">N</span>Nova Docs</div>
<div class="d-sidenav__sec">开始</div>
<div class="d-sidenav__item is-on"><span class="d-ico d-ico--b" style="width:17px;height:17px;font-size:9px">◈</span>快速上手</div>
<div class="d-sidenav__item"><span class="d-ico" style="width:17px;height:17px;font-size:9px">◉</span>安装</div>
<div class="d-sidenav__sec">核心概念</div>
<div class="d-sidenav__item"><span class="d-ico" style="width:17px;height:17px;font-size:9px">▤</span>工作流</div>
<div class="d-sidenav__item"><span class="d-ico" style="width:17px;height:17px;font-size:9px">▥</span>触发器</div>
</div>
<div class="d-sidenav__main">
<span class="d-sidenav__crumb">开始 / 快速上手</span>
<h4 class="d-h3">三步接入 Nova</h4>
<span style="height:7px;width:92%;border-radius:99px;background:var(--i-bg3)"></span>
<span style="height:7px;width:78%;border-radius:99px;background:var(--i-bg3)"></span>
<div class="d-img d-img--cool" style="height:34px"></div>
<span style="height:7px;width:64%;border-radius:99px;background:var(--i-bg3)"></span>
</div>
</div>