Named Slots

Named slots let a component define multiple "holes" — header, sidebar, default, footer — and the caller fills them by name.

3 min read Level 1/5 #astro#slots#named-slots

What you'll learn

Define and fill named slots
Provide fallback content per slot

A component can have multiple “holes” — header, sidebar, footer — by giving each <slot> a name.

Defining Named Slots

---
// src/components/Card.astro
---
<article class="card">
  <header>
    <slot name="header" />
  </header>
  <div class="card__body">
    <slot />            <!-- default slot -->
  </div>
  <footer>
    <slot name="footer">
      <small>No footer</small>
    </slot>
  </footer>
</article>

The unnamed <slot /> is the default. Each named slot can have fallback content between its tags.

Filling Named Slots

The caller uses slot="name" on the elements going into a named slot. Everything without a slot attribute lands in the default slot.

<Card>
  <h2 slot="header">Welcome</h2>
  <p>Body goes in the default slot.</p>
  <button slot="footer">Sign up</button>
</Card>

Wrapping Multiple Elements In One Slot

If you want several elements in the same named slot, use a Fragment with a slot attribute:

<Card>
  <Fragment slot="header">
    <h2>Welcome</h2>
    <p class="subtitle">Sign up below</p>
  </Fragment>
  <p>Body content here.</p>
</Card>

Reading Slots Programmatically

Astro.slots.has("header") tells you whether a slot was filled:

---
const hasHeader = Astro.slots.has("header");
---

{hasHeader && (
  <header>
    <slot name="header" />
  </header>
)}

Useful for conditionally rendering wrapper elements only when content was passed.

Up Next

Branching inside templates — three idioms.

Conditionals →