Interface Centro C · Convenção da indústria Plataforma: Web

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.

Você poderia chamar de Sidebar NavigationNavegação da barra lateral

Experimente um exemplo

Navegação da barra lateral

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

  1. 01Marco de navegação
  2. 02grupos de destino
  3. 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.

Solicitação que você pode copiar

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.

C
Quão oficial é este termo?

Convenção da indústria

As pessoas frequentemente usam este termo no trabalho. As fontes listadas podem apoiar a prática ou limitações. Elas não definem todas as partes do termo.

Nenhum padrão oficial único controla todo o termo. Seu significado pode mudar entre equipes, plataformas ou frameworks.

Escopo
Apenas o que a fonte cobre:nome canônico、definição、semântica、implementação
Status do documento
padrão de vida
Verificado em
2026-07-30

Fontes e escopo da evidência

Fonte de autoridade · WHATWG · padrão de vida HTML: Sections Sections Escopo: nome canônico、definição、semântica、implementação Papel aqui: Contexto útil, não uma definição A fonte cobre: nome canônico, definição, semântica, implementação Origem do fundo WHATWG HTML — The nav element Papel aqui: Contexto útil, não uma definição

Copie você mesmo

O navegador não conseguiu copiar isso. Selecione a solicitação abaixo e copie você mesmo.