侧边导航轨导航

它把几个主要页面入口竖直排在屏幕侧边,可以是窄窄的一条,也可以展开得更宽、放下更多入口。

  • 屏幕左边竖着一排切页面图标
  • 平板侧边那条窄窄的导航
  • 一列固定在边上的页面入口
  • 侧边那条能变宽的导航
  • 侧边导航能收起也能变宽
  • 导航轨
  • 竖向导航栏
  • 侧边图标导航
  • 展开式侧边导航轨

示例

尚无经验证的示例

这条词条暂时只提供平台定义和出处,不用临时动画冒充正式内容。

Web / iOS / Android 对照

iOS需自己实现

iOS / iPadOS

Navigation Rail

苹果没有导航轨这个组件。最接近的东西不是一条更窄的侧栏,而是 sidebarAdaptable 这一标签栏样式:侧栏与标签栏两种形态各带按钮互相切换,并随旋转与窗口尺寸自动适配——它换的是导航控件的种类,不是同一条轨的宽窄。

通常怎么做:只要侧栏时用 NavigationSplitView 的 Sidebar;不要只为模仿安卓而做一列无文字图标。

Android原生支持

Android medium 到 extra-large 断点;展开态也可覆盖在更小的屏幕上

Navigation Rail

也叫 Collapsed Navigation Rail · Expanded Navigation Rail

Compose Material 3: NavigationRail / WideNavigationRail / ModalWideNavigationRail

M3 Expressive 更新把它拆成两个变体:收起态取代基线导航轨,展开态取代导航抽屉;两者外观一致,靠菜单按钮互相切换。基线导航轨本身已不再被推荐。展开态又分两种配置:标准配置与正文并排,模态配置覆盖在正文之上,并且可以覆盖在更小屏幕的内容上、靠菜单按钮打开。「compact 窗口一律用底部导航栏」这句写在收起态那一节里,约束的是收起态;overview 给整个组件的用法范围列的是 medium / expanded / large / extra-large 四个窗口尺寸类,同一页的配图说明又写两种形态可以在包括竖屏手机在内的任何设备上互相切换——三处并存,这里按各自原文记录,不做取舍。Compose 的组件指南页至今只写 NavigationRail 与 NavigationRailItem,没有提到这两个变体;WideNavigationRail 与 ModalWideNavigationRail 在 androidx.compose.material3 的 API 索引里已经列出。

使用规范

什么时候用

  • medium 到 extra-large 断点需要三到七个一级目的地,用收起态
  • 窗口更大、横向空间富余时用展开态的标准配置,它与正文并排
  • 布局信息密度高、空间紧张,或目的地很多,用展开态的模态配置,它覆盖在正文之上

什么时候别用

  • 手机这类 compact 窗口 → 不要常驻收起态,主导航用底部标签栏
  • medium 窗口而目的地很少 → 官方建议改用底部标签栏

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。