Layouts & Components
Share one header, footer and shell across every page — no repetition.
What you will learn
- Create a master layout
- Extend it from child views
- Reuse pieces
One layout, many pages
Define a master layout once, then each page fills in the gaps with @section. No more copying the header onto every page.
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head><title>@yield('title')</title></head>
<body>
<header>CodingClave</header>
<main>@yield('content')</main>
<footer>© 2026</footer>
</body>
</html>This is your one shared shell. The header and footer are written once. The two @yield(...) lines are empty slots: @yield('title') is a slot for the page title, and @yield('content') is a slot for the main body. Each individual page will fill these slots with its own content.
Now a real page uses that layout and fills the slots:
<!-- a page that uses the layout -->
@extends('layouts.app')
@section('title', 'Products')
@section('content')
<h1>Our Products</h1>
@endsectionLine by line: @extends('layouts.app') says "wrap me inside that master layout". @section('title', 'Products') fills the title slot with the word Products. The @section('content') ... @endsection block fills the content slot with this page’s HTML. The browser receives the full layout — header, footer and all — with these pieces slotted in.
Note: Output: a complete HTML page whose <title> is "Products", with the shared header "CodingClave" at the top, your <h1>Our Products</h1> in the middle, and the "© 2026" footer at the bottom — without you rewriting the header or footer on this page.
Tip: This is the include/require idea from raw PHP, done elegantly. @extends uses the layout; @section fills its @yield slots. Laravel also has reusable components for buttons, cards, etc.
Q. Which directive makes a page use a master layout?
✍️ Practice
- Create a master layout and have two pages extend it.
- Add a shared nav to the layout.
🏠 Homework
- Convert a multi-page Blade site to use one shared layout.