Barras de navegação CSS
A lição de Layout esboçou regiões da página. Uma barra de navegação é a faixa de links que ajuda as pessoas a se mover entre essas regiões e páginas. Comece com uma lista semântica de links, coloque-os numa fileira calma e adicione pistas de hover — guarde menus dropdown aninhados para a próxima lição.
Um kit de ferramentas de navegação
📊 Navegação em um olhar
| Peça | Trabalho do dia a dia |
|---|---|
nav |
Landmark para links primários/secundários do site |
ul / li / a |
Lista estruturada de destinos |
| Reset de lista | Remover marcadores e recuo padrão para barras |
| Fileira horizontal | Flex ou inline-block para os links ficarem lado a lado |
| Hover / atual | Feedback do ponteiro e «você está aqui» |
| Nav vertical | A mesma lista empilhada — útil em sidebars |
Navegação ainda são links. Mantenha contornos de foco visíveis, dê padding confortável e não esconda o significado em pilhas de div anônimas.
Lista semântica dentro de nav
Envolva o menu em nav e mantenha destinos como âncoras reais numa lista. Leitores de tela e o você do futuro agradecerão a estrutura.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Barra horizontal com Flex
Uma fileira flex simples transforma a lista em barra. Gap e padding vencem alvos de clique apertados. (A arte mais profunda de Flexbox vem depois — isto basta para uma navbar limpa.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Pistas de hover e página atual
Dê feedback no hover e marque a página atual com uma classe. Nunca remova contornos :focus como «limpeza».
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Navegação lateral vertical
A mesma lista pode empilhar numa sidebar. Mantenha espaçamento generoso para cada link continuar fácil de acertar.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Um hábito de navegação calmo
Use nav + lista + padding legível. Prefira fileiras flex para barras horizontais. Deixe mega-menus e dropdowns para a próxima lição. Não confunda uma barra de links com o shell completo de layout da página.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
Experimente você
- Construa
nav > ul.nav > li > ae redefina estilos de lista. - Coloque links numa fileira flex horizontal com padding e gap.
- Adicione estilos
:hovere.is-current. - Duplique a lista como variante sidenav vertical.
- Escreva uma frase: o que pertence à lição Dropdowns em vez daqui?
Erros comuns
- Padding minúsculo que falha em toque e mouse
- Remover contornos de foco permanentemente
- Sopa de divs em vez de
nave listas - Construir mega-menus dropdown aninhados nesta lição
- Tratar a navbar como o layout inteiro do site
Resumo
- Barras de navegação são listas de links estruturadas dentro de
nav - Redefina marcadores e organize com flex (ou inline-block)
- Estilos hover e atual guiam sem matar o foco
- Nav vertical é a mesma lista empilhada
- Menus dropdown esperam a próxima lição
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo