Layouts and Sections (@yield, @extends)
Most pages on a site share the same overall structure — a header, a footer, and a navigation bar — with only the middle content changing. Blade's layout system avoids duplicating that shared markup across every view.
Defining a Layout
A layout is just a regular Blade view that defines the common page structure, with one or more placeholders marking where child views should insert their own content. These placeholders are declared using @yield.
Extending a Layout
A child view declares which layout it belongs to using @extends, then fills in the placeholder using @section. Laravel merges the two together at render time, producing a complete HTML page.
| Directive | Used In | Purpose |
|---|---|---|
@yield('content') | Layout file | Marks where a child view's content should appear |
@extends('layouts.app') | Child view | Declares which layout the view builds on |
@section('content') ... @endsection | Child view | Provides the actual content for a named placeholder |
@yield('title', 'Default') | Layout file | Yields a section with a fallback default value |
Benefits of This Approach
- Shared markup like headers and footers lives in exactly one file
- Design changes only need to be made once, in the layout
- Child views stay focused purely on their own unique content
Layouts solve page-level structure well, but for smaller, reusable pieces of UI — like a button or an alert — Laravel offers something more flexible: Blade components and slots.
Ready to master Laravel Training Course?
Join Uncodemy's hands-on Laravel program and build real, production-ready applications.