Barras de navegación CSS
La lección de Layout esbozó regiones de página. Una barra de navegación es la franja de enlaces que ayuda a moverse entre esas regiones y páginas. Empieza con una lista semántica de enlaces, colócalos en una fila calmada y añade pistas de hover — guarda los menús desplegables anidados para la siguiente lección.
Una caja de herramientas de navegación
📊 Navegación de un vistazo
| Pieza | Trabajo diario |
|---|---|
nav |
Landmark para enlaces primarios/secundarios del sitio |
ul / li / a |
Lista estructurada de destinos |
| Reset de lista | Quitar viñetas e sangría por defecto para barras |
| Fila horizontal | Flex o inline-block para que los enlaces queden lado a lado |
| Hover / actual | Feedback del puntero y «estás aquí» |
| Nav vertical | La misma lista apilada — útil en sidebars |
La navegación sigue siendo enlaces. Mantén visibles los contornos de foco, da padding cómodo y no escondas el significado en montones de div anónimos.
Lista semántica dentro de nav
Envuelve el menú en nav y mantén los destinos como anclas reales dentro de una lista. Los lectores de pantalla y tu yo futuro agradecerán la estructura.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Barra horizontal con Flex
Una fila flex sencilla convierte la lista en barra. Gap y padding ganan a objetivos de clic estrechos. (La artesanía profunda de Flexbox llega después — esto basta para una navbar limpia.)
.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 y página actual
Da feedback en hover y marca la página actual con una clase. Nunca quites los contornos :focus como «limpieza».
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Navegación lateral vertical
La misma lista puede apilarse en un sidebar. Mantén el espaciado generoso para que cada enlace sea fácil de pulsar.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Un hábito de navegación calmado
Usa nav + lista + padding legible. Prefiere filas flex para barras horizontales. Deja mega-menús y desplegables para la siguiente lección. No confundas una barra de enlaces con el shell completo de layout de página.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
Pruébalo tú
- Construye
nav > ul.nav > li > ay resetea estilos de lista. - Coloca enlaces en una fila flex horizontal con padding y gap.
- Añade estilos
:hovery.is-current. - Duplica la lista como variante sidenav vertical.
- Escribe una frase: ¿qué pertenece a la lección de Dropdowns en vez de aquí?
Errores comunes
- Padding minúsculo que falla en toques y ratón
- Quitar contornos de foco para siempre
- Sopa de divs en lugar de
navy listas - Construir mega-menús desplegables anidados en esta lección
- Tratar la navbar como el layout completo del sitio
Resumen
- Las barras de navegación son listas de enlaces estructuradas dentro de
nav - Resetea viñetas y luego organiza con flex (o inline-block)
- Estilos hover y actual guían sin matar el foco
- La nav vertical es la misma lista apilada
- Los menús desplegables esperan la siguiente lección
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior