Navigation Rail
侧边导航栏
WebMobileDesktop上手难度: 中等
竖着放在页面左侧的一列导航项，适合纵向空间比横向空间多的场景。
Live Demo
真的可以点图标态 (80px)
主内容区
你刚才看到的这个：你打开一个网页版后台或平板上的工具类 App，左边那列竖着的图标 + 文字导航就是 Navigation Rail；点汉堡按钮时它会展开成完整的侧边栏。
它到底是什么
Navigation Rail 是底部导航的竖版孪生兄弟。它在平板、桌面和宽屏 Web 上取代 Bottom Navigation，容纳更多入口，并且可以展开显示文字标签。
侧边栏导航导航轨vertical navside rail竖向导航
Anatomy · 它由什么组成
Rail导航轨容器
竖向排列，可折叠
Destination导航项
图标 + 标签
FAB浮动按钮位
轨道顶部常放主操作
Collapse Toggle折叠开关
切换图标态 / 展开态
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 平板 / 桌面 / 宽屏布局 | 用 |
| 入口比 5 个更多 | 用 |
| 需要常驻可见的全局导航 | 用 |
| 手机竖屏小屏 | 不用 |
在手机上它会吃掉宝贵宽度，不如用底部导航或汉堡菜单。
入口只有 2 个时，一排文字链接就够了。
Similar Patterns
别搞混一句话区分：竖着放在页面左侧的一列导航项，适合纵向空间比横向空间多的场景。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在平板布局左侧加 Navigation Rail，图标在上文字在下，包含 概览 / 媒体 / 相册 / 设置，可折叠成只有图标。
不要只对 AI 说
Bad → Better不要这样对 AI 说
左边加个侧边栏菜单。
改成这样说
在左侧加 Navigation Rail：图标在上、文字在下，宽度 840px 以下自动折叠为汉堡按钮控制的 Drawer。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。