Navigationsleiste
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Navigationsleisten sind ein wichtiger Bestandteil jeder TV-App, da sie Nutzern den Zugriff auf verschiedene Ziele und Funktionen ermöglichen. Eine Navigationsleiste ist das Rückgrat der Informationsarchitektur der App und bietet eine klare und intuitive Navigation durch die App.
Im Gegensatz zur mobilen Navigationsleiste sind auf dem Fernseher sowohl der maximierte als auch der minimierte Zustand für den Nutzer sichtbar.
Ressourcen
Highlights
- Ziele werden nach ihrer Wichtigkeit für Nutzer sortiert. Häufig besuchte Ziele werden zuerst angezeigt und ähnliche Ziele werden gruppiert.
- Für minimierte Navigationsleisten für die Standard- und die modale Navigation ist ein Navigationsstreifen erforderlich.
Varianten
Es gibt zwei Arten von Navigationsleisten:
- Standard-Navigationsleiste: Sie maximiert sich, um zusätzlichen Platz für die Navigation zu schaffen, und schiebt die Seiteninhalte zur Seite.
- Modaler Navigationsbereich: Wird als Overlay über den App-Inhalten mit einem Schirm angezeigt, der die Lesbarkeit verbessert, wenn der Navigationsbereich maximiert wird.
Standardnavigationsleiste
Anatomie
- Oberer Bereich:Hier ist das App-Logo zu sehen. Die Schaltfläche dient zum Wechseln von Profilen oder zum Auslösen einer Suchaktion. Im minimierten Zustand ist nur das Symbol im oberen Container sichtbar.
- Navigationselement:Jedes Element in der Navigationsleiste besteht aus einer Kombination aus Symbol und Text. Im minimierten Zustand ist nur das Symbol zu sehen.
- Navigationsleiste:Die Navigationsleiste ist eine Spalte mit drei bis sieben App-Zielorten, die als Hauptmenü dient. Jede Zielseite hat ein Textlabel und ein optionales Symbol. Sie können Menüpunkte gruppieren, um die Kontextbezogenheit zu verbessern.
- Unterer Bereich:Hier können sich eine bis drei Aktionsschaltflächen befinden. Sie eignen sich ideal für Seiten wie Einstellungen, Hilfe oder Profil.
Verhalten
- Maximierung der Navigationsleiste:Wenn die Standardnavigationsleiste maximiert wird, werden die Seiteninhalte nach unten verschoben, um Platz für die maximierte Navigationsleiste zu schaffen.
- Navigationsaktualisierungen:Wenn Sie von einem Navigationselement zu einem anderen wechseln, wird die Seite automatisch auf das neue Ziel aktualisiert.
Modale Navigationsleiste
Anatomie
- Oberer Bereich:Hier ist das App-Logo zu sehen. Dient als Schaltfläche zum Wechseln von Profilen oder zum Auslösen einer Suchaktion. Im minimierten Zustand ist nur das Symbol im oberen Container sichtbar.
- Navigationselement:Jedes Element in der Navigationsleiste besteht aus einer Kombination aus Symbol und Text. Im minimierten Zustand ist nur das Symbol zu sehen.
- Navigationsleiste:Spalte mit drei bis sieben App-Zielen, die als Hauptmenü dient. Jede Zielseite hat ein Textlabel und ein optionales Symbol. Außerdem können Menüpunkte für eine bessere Kontextualität gruppiert werden.
- Schatten:Verbessert die Lesbarkeit des Navigationselement-Texts.
- Unterer Bereich:Hier können sich eine bis drei Aktionsschaltflächen befinden. Sie eignen sich ideal für Seiten wie Einstellungen, Hilfe oder Profil.
Verhalten
- Ausgeblendete Navigationsleiste:Wird als Overlay über den App-Inhalten angezeigt. Ein Scrim verbessert die Lesbarkeit, wenn die Navigationsleiste ausgeblendet ist.
- Navigationsaktualisierungen:Diese treten auf, wenn der Nutzer ein Navigationselement auswählt.
Scrim
Bei der modalen Navigationsleiste sorgt ein Scrim hinter der Leiste dafür, dass die Inhalte der Leiste gut lesbar sind. Sie können hinter der Navigationsleiste einen Farbverlauf oder eine durchgehende Fläche verwenden, um verschiedene Varianten der Benutzeroberfläche zu erstellen.
Farbverlaufs-Gitter
Vollständiges Gitter
Technische Daten
Nutzung
Aktiv-Anzeige
Die aktive Anzeige ist ein visuelles Signal, das das angezeigte Ziel der Navigationsleiste hervorhebt. Der Indikator wird in der Regel durch eine Hintergrundform dargestellt, die sich optisch von den anderen Elementen in der Leiste abhebt.
Der aktive Indikator hilft Nutzern zu verstehen, wo sie sich in der App befinden und welches Ziel sie gerade aufrufen. Der aktive Indikator muss gut sichtbar sein und sich leichter von den anderen Elementen in der Navigationsleiste unterscheiden lassen.
Trennlinien (optional)
Mit Trennlinien können Sie Gruppen von Zielen im Navigationsmenü für eine bessere Organisation voneinander trennen. Sie sollten sie jedoch sparsam verwenden, da zu viele Trennlinien visuellen Lärm erzeugen und die Nutzer unnötig kognitiv überfordern können.
Badges
Logos sind visuelle Hinweise, die Navigationselementen hinzugefügt werden können, um zusätzliche Informationen bereitzustellen. Mit einem Symbol kann beispielsweise die Anzahl der neuen Filme in einer Streaming-App angegeben werden. Verwenden Sie Symbole sparsam und nur, wenn es unbedingt erforderlich ist, da sie die Benutzeroberfläche überladen und unübersichtlich erscheinen lassen können. Achten Sie bei der Verwendung von Logos darauf, dass sie klar und leicht verständlich sind und die Nutzer nicht bei der Navigation durch die App behindern.
Symbol maximiert
Symbol minimiert
Labels
Labels in der Navigationsleiste sollten klar und prägnant sein, damit sie leichter zu lesen sind.
warning
Achtung
Wenn lange Labels nicht vermieden werden können, kürzen Sie das Label mit einem Auslassungszeichen.
cancel
Don'ts
Vermeiden Sie lange Textlabels, die einen Umbruch erfordern.
cancel
Don'ts
Erstellen Sie keine Navigationsleiste ohne Symbole, da dies die Navigation in der App erschweren kann.
cancel
Don'ts
Vermeiden Sie es, Navigationselemente mit Symbolen mit Navigationselementen ohne Symbole zu kombinieren, da dies die Navigation für Nutzer verwirrend machen kann.
Navigationsleisten sind grundlegende Elemente, die die Hierarchie Ihrer App darstellen. Sie sollten nur fünf bis sechs Hauptnavigationsziele enthalten.
check_circle
Dos
Begrenzen Sie die Anzahl der Hauptnavigationsziele in der Navigationsleiste auf fünf bis sechs, um die Nutzerfreundlichkeit zu verbessern.
cancel
Don'ts
Fügen Sie nicht zu viele Navigationselemente hinzu, da dies zu vertikalem Scrollen führen und die Navigation in der App erschweren kann.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[null,null,["Zuletzt aktualisiert: 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."]]
