Navigation drawer
Stay organized with collections
Save and categorize content based on your preferences.
Navigation drawers are essential components in any TV app as they allow users
to access different destinations and features. A navigation drawer is the
backbone of the app's information architecture, providing a clear and intuitive
way to navigate through the app.
In contrast to the mobile navigation drawer, the navigation drawer on
TV has both expanded and collapsed states visible to the user.
Resources
Highlights
- Destinations are ordered according to user importance, with frequent
destinations first and related destinations grouped together.
- A navigation rail is required for both standard and modal navigation
drawers when collapsed.
Variants
There are two type of navigation drawer styles:
- Standard navigation drawer — Expands to
create additional space for navigation, pushing the page content aside.
- 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.
Standard navigation drawer
Anatomy
- 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.
- 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.
- 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.
- Bottom section: Can have one to three action buttons,
which are ideal for pages like settings, help, or profile.
Behavior
- Navigation drawer expansion: When expanded the standard navigation
drawers pushes the page content making space for the expanded
version for the navigation.
- Navigation updates: Moving from one nav item to another, the
page automatically updates to the new destination.
Modal navigation drawer
Anatomy
- 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.
- 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.
- 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.
- Scrim: For better readability of navigation item text.
- Bottom section: Can have one to three action buttons,
which are ideal for pages like settings, help, or profile.
Behavior
- Drawer expansion: Appears as an overlay on
top of the app's content, with a scrim that improves readability
when the drawer is expanded.
- Navigation updates: Occur when the user
selects a navigation item.
Scrim
For the modal navigation drawer, a scrim behind the
drawer ensures the drawer content is readable. You can
use a gradient or solid surface behind the navigation drawer to create different
variations of the UI.
Gradient scrim
Solid scrim
Spec
Usage
Active Indicator
The active indicator is a visual cue that highlights the navigation drawer
destination that is displayed. The indicator is typically represented by a
background shape that is visually distinct from the other items in the drawer.
The active indicator helps users understand where they are in the app and which
destination they are browsing. Ensure that the active indicator is clearly
visible and easier to distinguish from the other items in the navigation drawer.
Dividers (optional)
Dividers can be used to separate groups of destinations within the navigation
drawer for better organization. However, it's important to use them sparingly as
too many dividers can create visual noise and add unnecessary cognitive overload
for users.
Badges
Badges are visual cues that can be added to navigation items to provide
additional information. For example, a badge could be used to
indicate the number of new movies available in a streaming app. Use
badges sparingly and only when necessary, as they can
make the UI appear busy and cluttered. When using badges, ensure that
they are clear and easier to understand and that they don't
interfere with the user's ability to navigate the app.
Badge expanded
Badge collapsed
Labels
Labels in the navigation drawer should be clear and concise so that they
are easier to read.
warning
Caution
If it's impossible to avoid using long labels, truncate the label using an ellipsis.
cancel
Don't
Avoid using long text labels that require wrapping.
cancel
Don't
Avoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app.
cancel
Don't
Avoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.
Navigation drawers are foundational elements that represent your app's
hierarchy and should be used to list only five to six primary
navigation destinations.
check_circle
Do
Limit the number of main navigation destinations in the navigation drawer to five to six for a better user experience.
cancel
Don't
Avoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-09 UTC."],[],[],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."]]
