Skip to content

Layout Sections & Blade Stacks

The master layout (layout/layout.blade.php) exposes named sections that child templates can fill. Understanding these is critical to building any page correctly.

The Layout Contract

Every page template must call @extends('layout.layout') and then define one or more sections. The layout renders them in the appropriate place.

@extends('layout.layout')

{{-- Required: the page title --}}
@section('headtitle')
    <title>My Page Title | {{ $page->settings->siteTitle }}</title>
@endsection

{{-- Optional: page-specific styles in the <head> --}}
@section('style')
    <style>
        .my-class { color: red; }
    </style>
@endsection

{{-- Required: the main page content --}}
@section('content')
    <div class="container">
        <h1>Hello World!</h1>
    </div>
@endsection

{{-- Optional: page-specific scripts at the bottom of <body> --}}
@section('script')
    <script>
        console.log('Page loaded!');
    </script>
@endsection

Supported @yield / @section Slots

Section Name Location in DOM Description
headtitle Inside <head> The <title> tag. Always override this.
headmeta Inside <head> Extra <meta> tags (Open Graph for product pages).
headlink Inside <head> Extra <link> tags (e.g., external CSS libraries).
head Inside <head> Generic head content (alternate to headlink).
style Inside <head> Page-specific inline <style> blocks.
content Inside <main> The main page body. All visible content goes here.
script Bottom of <body> Page-specific <script> blocks and JS.

The @parent Directive

Some sections use @parent to append to the parent layout's content rather than replacing it. For example, on the product detail page, the headlink section adds specific CSS while keeping the layout's default links:

@section('headlink')
    <link href="https://cdn.example.com/special.css" rel="stylesheet">
    @parent  {{-- ← This keeps the layout's headlink content too --}}
@endsection

Complete Layout Skeleton

Here is a complete annotated example of a minimal, correctly-structured page template:

@extends('layout.layout')

{{-- 1. Always set the <title> --}}
@section('headtitle')
    <title>Contact Us | {{ $page->settings->siteTitle ?? 'Store' }}</title>
@endsection

{{-- 2. Optional: Add page-specific SEO meta tags --}}
@section('headmeta')
    <meta property="og:title" content="Contact Us">
    <meta property="og:type" content="website">
    @parent
@endsection

{{-- 3. Optional: External CSS for this page only --}}
@section('headlink')
    <link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet">
    @parent
@endsection

{{-- 4. Optional: Page-specific inline styles --}}
@section('style')
    <style>
        #contact-map { height: 400px; }
    </style>
@endsection

{{-- 5. Required: The main visible content --}}
@section('content')
    <div class="container mt-4">
        <h1>Contact Us</h1>
        <p>Phone: {{ settings('contact_phone') }}</p>
        <div id="contact-map"></div>
    </div>
@endsection

{{-- 6. Optional: Page-specific JavaScript --}}
@section('script')
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('contact-map').setView([51.5, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    </script>
@endsection