Gaveta de navegação
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
As gavetas de navegação são componentes essenciais em qualquer app de TV, porque permitem que os usuários
acessem diferentes destinos e recursos. Uma gaveta de navegação é a
estrutura da arquitetura da informação do app, oferecendo uma maneira clara e intuitiva
de navegar pelo app.
Ao contrário da gaveta de navegação para dispositivos móveis, a gaveta de navegação na
TV tem estados abertos e fechados visíveis para o usuário.
Recursos
Destaques
- Os destinos são ordenados de acordo com a importância para o usuário, com os destinos frequentes
primeiros e os destinos relacionados agrupados.
- Um trilho de navegação é necessário para gavetas de navegação padrão e
modal quando recolhidas.
Variantes
Há dois tipos de estilos de gaveta de navegação:
- Gaveta de navegação padrão: se expande para
criar mais espaço para navegação, empurrando o conteúdo da página para o lado.
- Gaveta de navegação modal: aparece como uma
sobreposição sobre o conteúdo do app com um scrim que ajuda a
melhorar a legibilidade quando a gaveta está aberta.
Gaveta de navegação padrão
Anatomia
- Seção de cima:mostra o logotipo do app. Serve como um botão para
alternar perfis ou acionar a ação de pesquisa. No estado fechado,
apenas o ícone permanece visível no contêiner superior.
- Item de navegação:cada item na coluna de navegação tem
uma combinação de ícone e texto, com apenas o ícone visível
no estado fechado.
- Coluna de navegação:é uma coluna que
mostra de três a sete destinos do app, atuando como o menu principal. Cada destino
tem um rótulo de texto e um ícone opcional, com a opção de agrupar itens de menu
para melhor contextualização.
- Seção de baixo:pode ter de um a três botões de ação,
que são ideais para páginas como configurações, ajuda ou perfil.
Comportamento
- Expansão da gaveta de navegação:quando expandida, a gaveta de navegação
padrão empurra o conteúdo da página, abrindo espaço para a versão
expandida da navegação.
- Atualizações de navegação:ao passar de um item de navegação para outro, a
página é atualizada automaticamente para o novo destino.
Gaveta de navegação modal
Anatomia
- Seção de cima:mostra o logotipo do app. Serve como um botão para alternar
perfis ou acionar uma ação de pesquisa. No estado fechado, apenas o
ícone permanece visível no contêiner de cima.
- Item de navegação:cada item na coluna de navegação tem
uma combinação de ícone e texto, com apenas o ícone visível no
estado fechado.
- Trecho de navegação:coluna que
mostra de três a sete destinos do app, atuando como o menu principal. Cada
destino tem um rótulo de texto e um ícone opcional, com a
opção de agrupar itens de menu para melhor contextualização.
- Esboço:para melhorar a legibilidade do texto do item de navegação.
- Seção de baixo:pode ter de um a três botões de ação,
que são ideais para páginas como configurações, ajuda ou perfil.
Comportamento
- Expansão da gaveta:aparece como uma sobreposição
sobre o conteúdo do app, com um scrim que melhora a legibilidade
quando a gaveta está aberta.
- Atualizações de navegação:ocorrem quando o usuário
seleciona um item de navegação.
Scrim
Para a gaveta de navegação modal, uma tela escura atrás da
gaveta garante que o conteúdo dela seja legível. É possível
usar um gradiente ou uma superfície sólida atrás da gaveta de navegação para criar diferentes
variações da interface.
Gradiente scrim
Efeito sólido
Especificações
Uso
Indicador ativo
O indicador ativo é uma dica visual que destaca o destino da gaveta de navegação
exibido. O indicador geralmente é representado por uma
forma de plano de fundo visualmente distinta dos outros itens na gaveta.
O indicador ativo ajuda os usuários a entender onde eles estão no app e qual
destino eles estão navegando. Verifique se o indicador ativo está claramente
visível e é mais fácil de distinguir dos outros itens na gaveta de navegação.
Divisores (opcional)
Os divisores podem ser usados para separar grupos de destinos na gaveta de navegação
para melhor organização. No entanto, é importante usá-los com moderação, porque
dividir demais pode criar ruído visual e sobrecarga cognitiva desnecessária
para os usuários.
Selos
Os selos são indicadores visuais que podem ser adicionados a itens de navegação para fornecer
mais informações. Por exemplo, um selo pode ser usado para
indicar o número de novos filmes disponíveis em um app de streaming. Use
selos com moderação e apenas quando necessário, porque eles podem
tornar a interface ocupada e confusa. Ao usar selos, verifique se
eles são claros e fáceis de entender e se não
interferem na capacidade do usuário de navegar pelo app.
Selo aberto
Selo recolhido
Rótulos
Os rótulos na gaveta de navegação precisam ser claros e concisos para
facilitar a leitura.
warning
Cuidado
Se não for possível evitar rótulos longos, use reticências para truncar o texto.
cancel
O que não fazer
Evite usar rótulos de texto longos que exigem ajuste.
cancel
O que não fazer
Evite criar uma gaveta de navegação sem ícones, porque isso pode dificultar a navegação no app.
cancel
O que não fazer
Evite misturar itens de navegação com e sem ícones, porque isso pode confundir os usuários.
As gavetas de navegação são elementos fundamentais que representam a hierarquia
do app e devem ser usadas para listar apenas cinco a seis destinos de navegação
principais.
check_circle
O que fazer
Limite o número de destinos de navegação principais na gaveta de navegação a cinco ou seis para melhorar a experiência do usuário.
cancel
O que não fazer
Evite adicionar muitos itens de navegação, porque isso pode criar uma rolagem vertical e dificultar a navegação no app.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 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."]]
