导航抽屉让用户可以在较大设备上切换不同的界面视图。

一、概览（Overview）

1. 设计原则

注：在 Material 3 Expressive 更新中，导航抽屉正在被弃用。对于已完成更新的产品，请使用扩展导航栏（expanded navigation rail），它在功能上与导航抽屉基本一致，并且能更好地在不同窗口尺寸等级之间自适应。

• 在扩展、大型与超大窗口尺寸下使用标准导航抽屉（standard navigation drawer）。
• 在紧凑与中等窗口尺寸下使用模态导航抽屉（modal navigation drawer）。
• 默认状态可以为打开或关闭（open / closed）。
• 两种类型：标准（standard）与模态（modal）。
• 将最常用的导航项放在顶部，并将相关导航项分组放在一起。

① 标准导航抽屉（Standard navigation drawer）

② 模态导航抽屉（Modal navigation drawer）

2. M3 Expressive 更新

2025 年 5 月（May 2025）

导航抽屉正在被弃用。请改用扩展导航栏（expanded navigation rail）替代。

3. 与 M2 的差异

颜色（Color）：新的颜色映射，并兼容动态颜色（dynamic color）。

类型（Types）：区分两种独立的导航抽屉类型：标准（standard）与模态（modal）。

形状（Shape）：抽屉的末端边缘采用圆角。

状态（States）：用于表示选中状态的颜色与形状已更新。

M2（左图）：导航抽屉为直角边，并使用矩形形状来表示激活的导航项。

M3（右图）：导航抽屉采用圆角，使用新的颜色映射，并更新了用于表示激活导航项的指示样式。

二、规格（Specs）

注：在 Material 3 Expressive 更新中，导航抽屉正在被弃用。对于已完成更新的产品，请使用扩展导航栏（expanded navigation rail）替代，它在功能上与导航抽屉基本一致，并且能更好地在不同窗口尺寸等级之间自适应。

① 容器（Container）

② 标题（Headline）

③ 标签文字（Label text）

④ 图标（Icon）

⑤ 激活指示器（Active indicator）

⑥ 徽标标签文字（Badge label text）

⑦ 遮罩（Scrim）

1. 颜色

颜色值通过设计令牌（design tokens）来实现。对设计而言，这意味着使用与令牌对应的颜色值进行设计。对实现而言，颜色值会是一个引用具体数值的令牌。

导航抽屉在浅色与深色方案中使用的颜色角色如下：

① 表面容器低（Surface container low）

② 表面变体上色（On surface variant）

③ 次级容器上色（On secondary container）

④ 次级容器上色（On secondary container）

⑤ 次级容器（Secondary container）

⑥ 次级容器上色（On secondary container）

⑦ 表面变体上色（On surface variant）

⑧ 表面变体上色（On surface variant）

⑨ 遮罩（Scrim）

2. 状态

状态（States）是用于传达组件或可交互元素状态的视觉表现。

导航抽屉状态（Navigation drawer states）：

① 启用（Enabled）