抽屉式导航栏
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
抽屉式导航栏是任何 TV 应用中必不可少的组件，因为它允许用户访问不同的目的地和功能。抽屉式导航栏是应用信息架构的支柱，可提供清晰直观的方式来浏览应用。
与移动设备上的抽屉式导航栏不同，电视上的抽屉式导航栏既有展开状态，也有对用户可见的收起状态。
资源
亮点
- 目的地会按用户重要性排序，经常访问的目的地会排在前面，相关目的地会归为一组。
- 标准抽屉式导航栏和模态抽屉式导航栏在收起时都需要导航侧边栏。
变体
抽屉式导航栏样式有两种：
- 标准抽屉式导航栏 - 展开即可创建额外的导航空间，将页面内容推到一边。
- 模态抽屉式导航栏 - 显示为应用内容之上的叠加层，并带有遮罩，有助于在抽屉式导航栏展开时提高可读性。
标准抽屉式导航栏
解剖学
- 顶部部分：显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在收起状态下，顶部容器中只会显示图标。
- 导航项：侧边导航栏中的每个项都包含图标和文本，在收起状态下，系统只会显示图标。
- 侧边导航栏：侧边导航栏是一个列，用于显示 3 到 7 个应用目的地，充当主菜单。每个目的地都有文本标签和可选图标，您可以选择对菜单项进行分组，以便更好地体现上下文。
- 底部部分：可以包含 1 到 3 个操作按钮，非常适合用于“设置”“帮助”或“个人资料”等页面。
行为
- 抽屉式导航栏展开：展开后，标准抽屉式导航栏会推送页面内容，为导航栏的展开版本留出空间。
- 导航栏更新：从一个导航栏项移动到另一个导航栏项时，页面会自动更新到新目的地。
模态抽屉式导航栏
解剖学
- 顶部部分：显示应用徽标。用作切换个人资料或触发搜索操作的按钮。在收起状态下，顶部容器中仅会显示图标。
- 导航项：侧边导航栏中的每个项都包含图标和文本的组合，在收起状态下，系统只会显示图标。
- 侧边导航栏：显示三到七个应用目的地的列，用作主菜单。每个目的地都有一个文本标签和一个可选图标，您可以选择将菜单项分组，以便更好地体现上下文。
- 模糊处理：提高导航项文本的可读性。
- 底部部分：可以包含 1 到 3 个操作按钮，非常适合用于“设置”“帮助”或“个人资料”等页面。
行为
- 抽屉展开：在应用内容上方显示为叠加层，并带有遮罩，以便在抽屉展开时提高可读性。
- 导航更新：在用户选择导航项时发生。
纱罩
对于模态抽屉式导航栏，抽屉后面的遮罩可确保抽屉内容可读。您可以在抽屉式导航栏后面使用渐变或纯色 Surface，以创建界面的不同变体。
渐变纱罩
纯色纱罩
规格
用法
活动指示器
活动指示器是一种视觉提示，用于突出显示的抽屉式导航栏目的地。指示器通常由与抽屉中其他项在视觉上明显不同的背景形状表示。活跃指示器可帮助用户了解自己在应用中的位置以及正在浏览的目的地。确保活动指示器清晰可见，并且更容易与抽屉式导航栏中的其他项区分开来。
分隔线（可选）
分隔线可用于在抽屉式导航栏中分隔一组目的地，以便更好地进行整理。不过，请务必谨慎使用分隔线，因为分隔线过多可能会造成视觉干扰，并给用户带来不必要的认知负担。
徽章
标记是一种视觉提示，可添加到导航项中以提供额外信息。例如，徽章可用于指示在线播放应用中提供的新电影数量。请谨慎使用徽章，仅在必要时使用，因为徽章可能会使界面看起来繁杂无序。使用徽章时，请确保徽章清晰易懂，并且不会干扰用户浏览应用。
徽章已展开
徽章已收起
标签
抽屉式导航栏中的标签应简洁明了，以便于阅读。
warning
注意
如果无法避免使用长标签，请使用省略号截断标签。
cancel
错误做法
避免使用需要换行的长文本标签。
cancel
错误做法
避免创建没有图标的抽屉式导航栏，因为这可能会使用户难以浏览应用。
cancel
错误做法
避免将图标导航项与非图标导航项混合使用，因为这可能会让用户感到困惑。
抽屉式导航栏是代表应用层次结构的基础元素，应仅用于列出五到六个主要导航目的地。
check_circle
正确做法
将抽屉式导航栏中的主要导航目的地数量限制为 5 到 6 个，以便提供更好的用户体验。
cancel
错误做法
避免添加过多导航项，因为这可能会导致垂直滚动，使用户更难于浏览应用。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-27。
[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Navigation drawers are essential components in any TV app as they allow users\nto access different destinations and features. A navigation drawer is the\nbackbone of the app's information architecture, providing a clear and intuitive\nway to navigate through the app.\n\nIn contrast to the mobile navigation drawer, the navigation drawer on\nTV has both expanded and collapsed states visible to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose (NavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0)) [Jetpack Compose (ModalNavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) | Available |\n\nHighlights\n----------\n\n- Destinations are ordered according to user importance, with frequent destinations first and related destinations grouped together.\n- A navigation rail is required for both standard and modal navigation drawers when collapsed.\n\nVariants\n--------\n\nThere are two type of navigation drawer styles:\n\n1. **Standard navigation drawer** --- Expands to create additional space for navigation, pushing the page content aside.\n2. **Modal navigation drawer** --- Appears as an overlay on top of the app's content with a scrim that helps to improve readability when the drawer is expanded.\n\nStandard navigation drawer\n--------------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** The Navigation Rail is a column that shows 3 to 7 app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Navigation drawer expansion:** When expanded the standard navigation drawers pushes the page content making space for the expanded version for the navigation.\n- **Navigation updates:** Moving from one nav item to another, the page automatically updates to the new destination.\n\nModal navigation drawer\n-----------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger a search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** Column that shows three to seven app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Scrim:** For better readability of navigation item text.\n5. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Drawer expansion:** Appears as an overlay on top of the app's content, with a scrim that improves readability when the drawer is expanded.\n- **Navigation updates:** Occur when the user selects a navigation item.\n\n### Scrim\n\nFor the modal navigation drawer, a scrim behind the\ndrawer ensures the drawer content is readable. You can\nuse a gradient or solid surface behind the navigation drawer to create different\nvariations of the UI.\n\n\nGradient scrim \n\nSolid scrim\n\n\u003cbr /\u003e\n\nSpec\n----\n\nUsage\n-----\n\n\n### Active Indicator\n\nThe active indicator is a visual cue that highlights the navigation drawer\ndestination that is displayed. The indicator is typically represented by a\nbackground shape that is visually distinct from the other items in the drawer.\nThe active indicator helps users understand where they are in the app and which\ndestination they are browsing. Ensure that the active indicator is clearly\nvisible and easier to distinguish from the other items in the navigation drawer. \n\n\u003cbr /\u003e\n\n\n### Dividers (optional)\n\nDividers can be used to separate groups of destinations within the navigation\ndrawer for better organization. However, it's important to use them sparingly as\ntoo many dividers can create visual noise and add unnecessary cognitive overload\nfor users. \n\n\u003cbr /\u003e\n\n### Badges\n\nBadges are visual cues that can be added to navigation items to provide\nadditional information. For example, a badge could be used to\nindicate the number of new movies available in a streaming app. Use\nbadges sparingly and only when necessary, as they can\nmake the UI appear busy and cluttered. When using badges, ensure that\nthey are clear and easier to understand and that they don't\ninterfere with the user's ability to navigate the app.\n\n\nBadge expanded \n\nBadge collapsed\n\n\u003cbr /\u003e\n\n### Labels\n\nLabels in the navigation drawer should be clear and concise so that they\nare easier to read. \nwarning\n\n### Caution\n\nIf it's impossible to avoid using long labels, truncate the label using an ellipsis. \ncancel\n\n### Don't\n\nAvoid using long text labels that require wrapping. \ncancel\n\n### Don't\n\nAvoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app. \ncancel\n\n### Don't\n\nAvoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.\n\nNavigation drawers are foundational elements that represent your app's\nhierarchy and should be used to list only five to six primary\nnavigation destinations. \ncheck_circle\n\n### Do\n\nLimit the number of main navigation destinations in the navigation drawer to five to six for a better user experience. \ncancel\n\n### Don't\n\nAvoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app."]]
