通用组件 / 06
顶部导航
通栏、玻璃、分栏三种顶栏形态，外加移动端底部 Tab 栏、侧边固定菜单、分类悬浮菜单、滚动吸顶导航、公告通知栏与多级折叠菜单。
通栏顶栏
full-width · 不透明
N
Nexus UILibrary
陈
页面内容区
高 64px，底部分割线 1px；左 Logo + 主导航 + 右侧操作区，移动端仅保留 Logo 与抽屉入口。
玻璃顶栏 · 分栏顶栏
glass / split移动端底部 Tab 栏
bottom tab bar侧边固定菜单
fixed side nav · 264px内容区
侧栏固定在左侧，宽 264px，内容区使用等宽外边距避免被遮挡；当前项目即采用这一结构。
N
侧边导航
折叠后
图标态 64px
分类悬浮菜单
hover mega menu全部商品分类
服饰鞋包›
美妆个护›
食品生鲜›
图书文娱›
交互说明
- 一级分类纵向排列，悬停或点击展开右侧二级面板（点击由 data-dd 驱动）。
- 二级面板宽 300px，与一级菜单左边缘对齐并向上偏移 0，形成连续的视觉走廊。
- 面板内最多三列共 12 个入口，超过则改为分组标题 + 链接列表。
- 移动端不使用悬浮菜单，改为抽屉 + 手风琴，避免误触与遮挡。
data-dd 驱动
hover + click 双通道
移动端降级为抽屉
滚动吸顶导航
sticky on scroll在滚动容器内吸顶（可实际滚动）
吸顶导航
向下滚动，导航条会停在容器顶部并保持不动，直到容器滚出可视区。
滚动到底部时导航依然固定在容器顶部。
吸顶行为规范
| 状态 | 高度 | 视觉 |
|---|---|---|
| 未滚动 | 64px | 透明底、无阴影，融入页面 |
| 已滚动 | 56px | bg-glass + shadow-nav + 1px 下边框 |
| 滚动中 | 56px | 进度条 2px 贴在底边，指示阅读进度 |
| 回到顶部 | 64px | 高度与阴影 200ms 过渡复原 |
高度变化会带动内容跳动
若顶栏高度会随滚动变化，请为内容区同步预留高度，或保持高度恒定只用阴影区分状态。
真实按钮见本页右下角：滚动超过 400px 后出现
公告通知栏
notice bar · 可关闭四种语义公告栏
弹幕公告 · 消息横向滚动
Nexus UI v3.0 已发布，新增 52 个行业模块页面
设计令牌新增 5 档阴影，深色模式对比度全面提升
组件总数达到 568 个，覆盖 16 个业务场景
弹幕式公告使用 .danmaku + .dm-item，逐条错开 animation-delay，不到 8 秒循环一轮。
公告栏置顶组合
Nexus UI
页面内容区
公告栏紧贴顶栏上方，关闭后通过 localStorage 记忆，7 天内不再出现。