Panneau de navigation
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les panneaux de navigation sont des composants essentiels de toute application TV, car ils permettent aux utilisateurs d'accéder à différentes destinations et fonctionnalités. Un panneau de navigation est l'épine dorsale de l'architecture de l'information de l'application. Il offre un moyen clair et intuitif de naviguer dans l'application.
Contrairement au panneau de navigation sur mobile, le panneau de navigation sur téléviseur est visible par l'utilisateur à la fois dans les états développé et réduit.
Ressources
Sélection
- Les destinations sont triées en fonction de leur importance pour l'utilisateur, les destinations fréquentes étant placées en premier et les destinations associées regroupées.
- Un rail de navigation est requis pour les panneaux de navigation standards et modaux lorsqu'ils sont réduits.
Variantes
Il existe deux types de styles de panneaux de navigation:
- Volet de navigation standard : se développe pour créer un espace supplémentaire pour la navigation, en repoussant le contenu de la page.
- Panneau de navigation modal : apparaît en superposition sur le contenu de l'application avec un écran de masquage qui permet d'améliorer la lisibilité lorsque le panneau est développé.
Panneau de navigation standard
Anatomie
- Section supérieure:affiche le logo de l'application. Sert de bouton pour changer de profil ou déclencher une action de recherche. Dans l'état réduit, seule l'icône reste visible dans le conteneur supérieur.
- Élément de navigation:chaque élément du rail de navigation comporte une combinaison d'icône et de texte, et seule l'icône est visible à l'état réduit.
- Rail de navigation:le rail de navigation est une colonne qui affiche trois à sept destinations d'application et sert de menu principal. Chaque destination est associée à un libellé textuel et à une icône facultative. Vous pouvez également regrouper les éléments de menu pour améliorer la contextualisation.
- Section inférieure:peut comporter un à trois boutons d'action, qui sont idéaux pour les pages telles que les paramètres, l'aide ou le profil.
Comportement
- Développement du panneau de navigation:lorsque le panneau de navigation standard est développé, il pousse le contenu de la page pour laisser de la place à la version développée de la navigation.
- Mise à jour de la navigation:lorsque vous passez d'un élément de navigation à un autre, la page est automatiquement mise à jour pour afficher la nouvelle destination.
Panneau de navigation modal
Anatomie
- Section supérieure:affiche le logo de l'application. Sert de bouton pour changer de profil ou déclencher une action de recherche. Dans l'état réduit, seule l'icône reste visible dans le conteneur supérieur.
- Élément de navigation:chaque élément du rail de navigation comporte une combinaison d'icône et de texte, et seule l'icône est visible à l'état réduit.
- Barre de navigation:colonne affichant trois à sept destinations d'application, servant de menu principal. Chaque destination est associée à un libellé textuel et à une icône facultative, avec la possibilité de regrouper des éléments de menu pour une meilleure contextualisation.
- Scrim:permet d'améliorer la lisibilité du texte des éléments de navigation.
- Section inférieure:peut comporter un à trois boutons d'action, qui sont idéaux pour les pages telles que les paramètres, l'aide ou le profil.
Comportement
- Ouverture du panneau:apparaît en superposition sur le contenu de l'application, avec un écran masqué qui améliore la lisibilité lorsque le panneau est ouvert.
- Mises à jour de navigation:se produisent lorsque l'utilisateur sélectionne un élément de navigation.
Scrim
Pour le panneau de navigation modal, un écran de masquage derrière le panneau garantit la lisibilité du contenu du panneau. Vous pouvez utiliser un dégradé ou une surface unie derrière le panneau de navigation pour créer différentes variantes de l'UI.
Fond dégradé
Fond opaque
Caractéristiques techniques
Utilisation
Indicateur d'activité
L'indicateur actif est un indice visuel qui met en évidence la destination du panneau de navigation affichée. L'indicateur est généralement représenté par une forme d'arrière-plan qui se distingue visuellement des autres éléments du panneau.
L'indicateur actif aide les utilisateurs à comprendre où ils se trouvent dans l'application et quelle destination ils consultent. Assurez-vous que l'indicateur actif est clairement visible et plus facile à distinguer des autres éléments du panneau de navigation.
Séparateurs (facultatif)
Les séparateurs permettent de séparer des groupes de destinations dans le panneau de navigation pour une meilleure organisation. Toutefois, il est important de les utiliser avec parcimonie, car un trop grand nombre de séparateurs peut créer du bruit visuel et ajouter une surcharge cognitive inutile pour les utilisateurs.
Badges
Les badges sont des repères visuels que vous pouvez ajouter aux éléments de navigation pour fournir des informations supplémentaires. Par exemple, un badge peut être utilisé pour indiquer le nombre de nouveaux films disponibles dans une application de streaming. Utilisez les badges avec parcimonie et uniquement lorsque cela est nécessaire, car ils peuvent donner à l'interface utilisateur un aspect chargé et encombré. Lorsque vous utilisez des badges, assurez-vous qu'ils sont clairs et faciles à comprendre, et qu'ils n'interfèrent pas avec la navigation de l'utilisateur dans l'application.
Badge développé
Badge réduit
Libellés
Les libellés du panneau de navigation doivent être clairs et concis pour faciliter la lecture.
warning
Attention
Si vous ne pouvez pas éviter d'utiliser des libellés longs, coupez-les à l'aide de points de suspension.
cancel
À éviter
Évitez d'utiliser des libellés de texte longs qui nécessitent un retour à la ligne automatique.
cancel
À éviter
Évitez de créer un panneau de navigation sans icônes, car cela peut compliquer la navigation dans l'application pour les utilisateurs.
cancel
À éviter
Évitez de mélanger des éléments de navigation avec des icônes et des éléments de navigation sans icônes, car cela peut rendre l'expérience de navigation déroutante pour les utilisateurs.
Les panneaux de navigation sont des éléments fondamentaux qui représentent la hiérarchie de votre application. Ils ne doivent être utilisés que pour lister cinq à six destinations de navigation principales.
check_circle
À faire
Limitez le nombre de destinations de navigation principales dans le panneau de navigation à cinq ou six pour améliorer l'expérience utilisateur.
cancel
À éviter
Évitez d'ajouter trop d'éléments de navigation, car cela peut créer un défilement vertical et compliquer la navigation dans l'application.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (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."]]
