# Describe the problem

The root layout is applied globally to all pages, meaning every route inherits from it by default. This can be problematic when you want certain pages to have a completely different layout. Resetting is not an option since there isn’t any level above the root layout to break out to.

/routes
├── +layout.svelte // has header
├── +page.svelte // don't want header on the frontpage
└── /about
    └── +page.svelte // do want header on the about page

# Use layout groups

Create two layout groups. One with a header and one without.

/routes
├── +page.svelte
└── /(hasHeader)
    ├── +layout.svelte
    └── /about
        └── +page.svelte

<script>
	let { children } = $props()
</script>

<h1>Welcome to my Website</h1>

{@render children()}

This is the about page.

This is the main page.

<script>
	let { children } = $props()
</script>

<header>
	<nav>
		<a href="/">/root</a>
		<a href="/about">/about</a>
	</nav>
</header>

<main>
	{@render children()}
</main>