Add a Site Header in SvelteKit | Build BookIt

Every page needs navigation. With layouts, you build it once and it automatically appears everywhere. Let’s create BookIt’s header.

What You’ll Learn

Add a header with navigation to the layout
Create the site logo/brand link
Build navigation links for all pages

Build the Header

Update your layout to include a proper header:

<!-- 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>

Visit any page. The navigation appears at the top. Click links — you move between pages, but the header stays consistent.

Understanding the Structure

The header contains:

Logo/Brand link — Links to home, identifies the site:

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

Navigation list — Links to main sections:

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

Using <ul> with <li> is semantically correct for navigation lists. Screen readers understand this as a group of related links.

Add Basic Styling

Let’s add minimal styles to make the navigation usable. Add a <style> block to your 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>

Now you have:

Logo on the left, links on the right
Subtle background and border
Hover states on links
Centered content with max width

Click through all pages:

Click “BookIt” logo → Homepage
Click “Services” → Services list
Click a service → Service detail
Click “About” → About page
Click “Contact” → Contact page

The header stays constant. Only the main content changes. This is the power of layouts.

One Change, Every Page

Try modifying the header. Add “Pricing” to the navigation:

<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>

Save the file. Visit every page — they all have the new link. You changed one file, but the update propagated everywhere. No more hunting through multiple files.

(Remove the Pricing link for now since we don’t have that page yet.)

Semantic HTML Matters

We used <header> and <nav> elements intentionally:

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

These semantic elements tell browsers and screen readers “this is the site header” and “this is navigation.” This improves:

Accessibility — screen readers announce “navigation” when entering this section
SEO — search engines understand your site structure
Maintainability — developers instantly understand the code’s purpose

Common Mistakes

Forgetting the Logo Home Link

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

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

Users expect clicking the logo/brand to go home. Always make it a link.

Inline Styles Instead of 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>

Keep styles in the <style> block for maintainability and scoping.

Summary

BookIt now has a consistent navigation header on every page. It’s defined once in the layout and automatically appears everywhere. Changes propagate instantly.

Key takeaways:

Header goes in +layout.svelte, above {@render children()}
Use semantic elements (<header>, <nav>) for accessibility
One file change updates navigation site-wide

Next Steps

The top is done. Continue with Add a Site Footer to complete the layout with consistent footer content.

Add a Site Header

Navigation That Stays