A Linha Final

Rodapés contêm navegação secundária, links legais, informações de contato e avisos de direitos autorais. Assim como os cabeçalhos, eles pertencem ao layout para que apareçam de forma consistente em todas as páginas.

O Que Você Vai Aprender

Adicionar um rodapé abaixo do conteúdo da página
Incluir elementos comuns de rodapé
Completar a estrutura básica do layout

Adicionar o Rodapé

Atualize seu layout para incluir um rodapé após <main>:

<!-- 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>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>BookIt</h4>
        <p>Simple online booking for local services.</p>
      </div>
      
      <div class="footer-section">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="/services">Services</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h4>Contact</h4>
        <p>hello@bookit.example</p>
        <p>(555) 123-4567</p>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>
    </div>
  </footer>
</div>

O rodapé inclui:

Descrição da marca
Links de navegação rápida
Informações de contato
Direitos autorais com ano dinâmico

Estilizar o Rodapé

Adicione estilos de rodapé ao seu bloco <style> existente:

<style>
  /* ... existing header/nav/main styles ... */
  
  footer {
    background: #333;
    color: #fff;
    padding: 2rem 1rem 1rem;
    margin-top: auto;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-section {
    flex: 1;
    min-width: 200px;
  }
  
  .footer-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
  }
  
  .footer-section p {
    margin: 0.5rem 0;
    color: #aaa;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section li {
    margin: 0.5rem 0;
  }
  
  .footer-section a {
    color: #aaa;
    text-decoration: none;
  }
  
  .footer-section a:hover {
    color: #fff;
  }
  
  .footer-bottom {
    border-top: 1px solid #444;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-bottom p {
    margin: 0;
    color: #888;
    font-size: 0.875rem;
  }
</style>

Ano de Direitos Autorais Dinâmico

Observe esta linha:

<p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>

A expressão {new Date().getFullYear()} executa JavaScript para obter o ano atual. Quando 2025 se tornar 2026, o rodapé é atualizado automaticamente. Sem necessidade de alterações manuais.

Testar o Layout Completo

Acesse qualquer página. Você deve ver:

Cabeçalho — Logo e navegação no topo
Principal — Conteúdo específico da página no meio
Rodapé — Informações do site e links na parte inferior

Role até o final das páginas curtas — o rodapé deve estar na parte inferior do viewport (graças ao margin-top: auto no footer e ao flexbox em .app).

O Layout Completo

Aqui está o +layout.svelte completo:

<!-- 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>
  
  <footer>
    <div class="footer-content">
      <div class="footer-section">
        <h4>BookIt</h4>
        <p>Simple online booking for local services.</p>
      </div>
      
      <div class="footer-section">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="/services">Services</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
      
      <div class="footer-section">
        <h4>Contact</h4>
        <p>hello@bookit.example</p>
        <p>(555) 123-4567</p>
      </div>
    </div>
    
    <div class="footer-bottom">
      <p>&copy; {new Date().getFullYear()} BookIt. All rights reserved.</p>
    </div>
  </footer>
</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;
  }
  
  header ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  header li a {
    text-decoration: none;
    color: #666;
  }
  
  header li a:hover {
    color: #333;
  }
  
  main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
  
  footer {
    background: #333;
    color: #fff;
    padding: 2rem 1rem 1rem;
    margin-top: auto;
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-section {
    flex: 1;
    min-width: 200px;
  }
  
  .footer-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
  }
  
  .footer-section p {
    margin: 0.5rem 0;
    color: #aaa;
  }
  
  .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section li {
    margin: 0.5rem 0;
  }
  
  .footer-section a {
    color: #aaa;
    text-decoration: none;
  }
  
  .footer-section a:hover {
    color: #fff;
  }
  
  .footer-bottom {
    border-top: 1px solid #444;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-bottom p {
    margin: 0;
    color: #888;
    font-size: 0.875rem;
  }
</style>

Erros Comuns

Rodapé Antes de `{@render children()}`

<!-- ❌ Footer appears above page content -->
<footer>...</footer>
{@render children()}

<!-- ✅ Footer appears below page content -->
{@render children()}
<footer>...</footer>

A ordem importa. O conteúdo é renderizado na ordem em que aparece no seu layout.

Fixar o Ano no Código

<!-- ❌ Needs manual update every year -->
<p>&copy; 2025 BookIt</p>

<!-- ✅ Always current -->
<p>&copy; {new Date().getFullYear()} BookIt</p>

O ano dinâmico significa uma coisa a menos para manter.

Resumo

O BookIt agora tem um layout completo com cabeçalho e rodapé. Cada página recebe automaticamente navegação consistente e informações do site sem nenhum código no nível da página.

Principais conclusões:

O rodapé vai após {@render children()} no layout
Use o elemento semântico <footer> para acessibilidade
Expressões dinâmicas como {new Date().getFullYear()} mantêm o conteúdo atualizado

Próximos Passos

O layout raiz envolve tudo, mas às vezes as seções precisam de um envolvimento adicional. Continue com Layouts Aninhados para aprender como a seção de serviços pode ter sua própria subnavegação.