Navegación que Permanece

Todas las páginas necesitan navegación. Con los layouts, la construyes una vez y aparece automáticamente en todas partes. Vamos a crear el encabezado de BookIt.

Lo que Aprenderás

Agregar un encabezado con navegación al layout
Crear el link del logo/marca del sitio
Construir links de navegación para todas las páginas

Construir el Encabezado

Actualiza tu layout para incluir un encabezado apropiado:

<!-- filename: src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
</div>

Visita cualquier página. La navegación aparece en la parte superior. Haz clic en los links — te mueves entre páginas, pero el encabezado se mantiene consistente.

Entendiendo la Estructura

El encabezado contiene:

Link del Logo/Marca — Lleva a inicio, identifica el sitio:

<a href="/" class="logo">BookIt</a>

Lista de navegación — Links a las secciones principales:

<ul>
  <li><a href="/services">Services</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Usar <ul> con <li> es semánticamente correcto para listas de navegación. Los lectores de pantalla entienden esto como un grupo de links relacionados.

Agregar Estilos Básicos

Vamos a agregar estilos mínimos para hacer la navegación usable. Agrega un bloque <style> a tu layout:

<!-- filename: src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
</div>

<style>
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  
  ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li a {
    text-decoration: none;
    color: #666;
  }
  
  li a:hover {
    color: #333;
  }
  
  main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
</style>

Ahora tienes:

Logo a la izquierda, links a la derecha
Fondo sutil y borde
Estados hover en los links
Contenido centrado con ancho máximo

Probar la Navegación

Haz clic en todas las páginas:

Haz clic en el logo "BookIt" → Página de inicio
Haz clic en "Services" → Lista de servicios
Haz clic en un servicio → Detalle del servicio
Haz clic en "About" → Página Acerca de
Haz clic en "Contact" → Página de contacto

El encabezado permanece constante. Solo cambia el contenido principal. Este es el poder de los layouts.

Un Cambio, Todas las Páginas

Intenta modificar el encabezado. Agrega "Pricing" a la navegación:

<ul>
  <li><a href="/services">Services</a></li>
  <li><a href="/pricing">Pricing</a></li>  <!-- New! -->
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Guarda el archivo. Visita todas las páginas — todas tienen el nuevo link. Cambiaste un archivo, pero la actualización se propagó en todas partes. No más búsquedas en múltiples archivos.

(Elimina el link de Pricing por ahora ya que aún no tenemos esa página.)

El HTML Semántico Importa

Usamos los elementos <header> y <nav> intencionalmente:

<header>
  <nav>
    <!-- links -->
  </nav>
</header>

Estos elementos semánticos le indican a los navegadores y lectores de pantalla "este es el encabezado del sitio" y "esta es la navegación." Esto mejora:

Accesibilidad — los lectores de pantalla anuncian "navegación" al entrar en esta sección
SEO — los motores de búsqueda entienden la estructura de tu sitio
Mantenibilidad — los desarrolladores entienden instantáneamente el propósito del código

Errores Comunes

Olvidar el Link de Inicio en el Logo

<!-- ❌ Logo doesn't go anywhere -->
<span class="logo">BookIt</span>

<!-- ✅ Logo links to home -->
<a href="/" class="logo">BookIt</a>

Los usuarios esperan que al hacer clic en el logo/marca los lleve a inicio. Siempre hazlo un link.

Estilos en Línea en Lugar de CSS

<!-- ❌ Hard to maintain -->
<nav style="display: flex; justify-content: space-between; padding: 1rem;">

<!-- ✅ Use style block -->
<nav>
  <!-- content -->
</nav>

<style>
  nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
  }
</style>

Mantén los estilos en el bloque <style> para mayor mantenibilidad y alcance.

Resumen

BookIt ahora tiene un encabezado de navegación consistente en todas las páginas. Se define una vez en el layout y aparece automáticamente en todas partes. Los cambios se propagan instantáneamente.

Puntos clave:

El encabezado va en +layout.svelte, arriba de {@render children()}
Usa elementos semánticos (<header>, <nav>) para la accesibilidad
Un cambio en un archivo actualiza la navegación en todo el sitio

Próximos Pasos

La parte superior está lista. Continúa con Agregar un Pie de Página del Sitio para completar el layout con contenido de pie de página consistente.