Navegação
Barra lateral
Sidebar
Uma coluna lateral que mantém destinos ou ferramentas sempre ao alcance.
Exemplo didático · Representação visual do padrão
Quando usar
Organizar produtos com muitas seções ou fluxos frequentes.
Cuidados e acessibilidade
No celular, ofereça uma forma clara de abrir e fechar o painel.
Partes e comportamento
Coluna de navegação, grupos de destinos e estado ativo.
Não confunda
Drawer é um painel que se revela sobre a tela; sidebar pode fazer parte permanente do layout.
Exemplo de código
<aside>
<nav aria-label="Áreas do projeto">
<a href="/visao-geral/">Visão geral</a>
<a href="/arquivos/">Arquivos</a>
</nav>
</aside>Trecho didático. Integre e teste no contexto do seu projeto.