What is base layout in astro

AstroConceptBeginner · 3 min read

Base Layout in Astro: What It Is and How to Use It

In Astro, a base layout is a reusable component that defines the common structure and design shared across multiple pages. It helps keep your site consistent by wrapping page content with shared elements like headers, footers, and navigation.

⚙️

How It Works

A base layout in Astro acts like a template for your web pages. Imagine you have a favorite notebook where every page has the same header and footer, but the middle part changes with your notes. The base layout is that notebook template.

When you create a base layout component, you include the parts that stay the same on every page, such as the site title, navigation menu, or footer. Then, you use a special placeholder called <slot /> where the unique content of each page will appear.

This way, you write the common parts once and reuse them everywhere, making your site easier to maintain and faster to build.

💻

Example

This example shows a simple base layout component in Astro that includes a header, a footer, and a slot for page content.

astro

---
// src/layouts/BaseLayout.astro
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Astro Site</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav>
        <a href="/">Home</a> |
        <a href="/about">About</a>
      </nav>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <p>© 2024 My Astro Site</p>
    </footer>
  </body>
</html>

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Astro Site</title> </head> <body> <header> <h1>Welcome to My Site</h1> <nav> <a href="/">Home</a> | <a href="/about">About</a> </nav> </header> <main>  </main> <footer> <p>© 2024 My Astro Site</p> </footer> </body> </html>

🎯

When to Use

Use a base layout in Astro whenever you want to keep parts of your website consistent across many pages. This is especially helpful for things like headers, footers, navigation menus, or any repeated design elements.

For example, if you have a blog, you can create a base layout with your site’s header and footer, then each blog post page only needs to provide the unique article content. This saves time and avoids mistakes from copying the same code everywhere.

It also makes updating your site easier—change the layout once, and all pages update automatically.

✅

Key Points

A base layout is a reusable Astro component that wraps page content.
It uses <slot /> to insert unique page content.
Helps keep your site design consistent and easier to maintain.
Ideal for shared elements like headers, footers, and navigation.

✅

Key Takeaways

A base layout in Astro defines common page structure shared across multiple pages.

Use <slot /> inside the layout to insert unique page content.

Base layouts keep your site consistent and simplify updates.

They are perfect for shared elements like headers, footers, and navigation menus.

Implementing a base layout saves time and reduces repetitive code.