Sidebar Navigation
Navegação da barra lateral
A navegação da barra lateral é uma área lateral com links nomeados que podem permanecer abertos ou dobrar. Frequentemente agrupa lugares relacionados em um produto.
Um exemplo real
Um espaço de trabalho possui 18 rotas agrupadas em Visão Geral, Relatórios e Administração. A barra lateral mostra os grupos, a página atual e uma visão menor que mantém os rótulos. Ações para a página atual pertencem a uma barra de ferramentas, não à navegação do site.
Partes principais
- 01Marco de navegação
- 02grupos de destino
- 03estado da página atual
Use-o quando
Use este termo quando um produto precisa de navegação visível e nomeada entre vários lugares relacionados.
Não o use quando
Não use uma barra lateral em um site simples com apenas alguns links principais. Em telas estreitas, planeje uma gaveta ou outro layout pequeno.
Nome usado no código
<nav aria-label=Workspace> grouped links Antes de lançar
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Navegação da barra lateral (Sidebar Navigation). User context: Um espaço de trabalho possui 18 rotas agrupadas em Visão Geral, Relatórios e Administração. A barra lateral mostra os grupos, a página atual e uma visão menor que mantém os rótulos. Ações para a página atual pertencem a uma barra de ferramentas, não à navegação do site. Recommended pattern: Navegação da barra lateral (Sidebar Navigation). Why it fits: Use este termo quando um produto precisa de navegação visível e nomeada entre vários lugares relacionados. Do not use it when: Não use uma barra lateral em um site simples com apenas alguns links principais. Em telas estreitas, planeje uma gaveta ou outro layout pequeno. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Nenhum padrão oficial único controla todo o termo. Seu significado pode mudar entre equipes, plataformas ou frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Navegação da barra lateral (Sidebar Navigation) is used now. Definition: A navegação da barra lateral é uma área lateral com links nomeados que podem permanecer abertos ou dobrar. Frequentemente agrupa lugares relacionados em um produto. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.