Eric Schumann Eric Schumann - 9 days ago 5
PHP Question

Using Laravel Framework - Only 1 yield is working in my layout.blade.php file

The issue is that my about.blade.php file shows in the layout, but my navbar.blade.php does not.

The best I can guess (I'm new to Laravel), is that my controller returns about.blade.php which extends layout.blade.php, but for some reason, layout.blade does not know about navbar.blade.php even though navbar.blade.php extends layout.blade.php.

layout.blade.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>

@yield('navbar')

<div class="container">

@yield('content')

</div>

</body>
</html>


navbar.blade.php

@extends('layout')
@section('navbar')

<header>
<nav class="nav navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/?page=main">SWMHS</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">Main</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>

</div>
</nav>
</header>

@endsection


about.blade.php

@extends('layout')

@section('content')

<h1 class="text-center">This is the About Page</h1>

@endsection

Answer

The yield directive doesn't work the way you're thinking it does. It will only display the content if the section has been added to the blade template.

You would need to add a navbar section and copy and paste it section into every view that you'd like it to show in. An alternative way is to create a partial and @include() the navbar template.

Here's the way it should be done, assuming your navbar template isn't going to change.

layout.blade.php

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        @include('partials.navbar')

        <div class="container">
            @yield('content')
        </div>

    </body>
</html>

partials/navbar.blade.php

<header>
    <nav class="nav navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/?page=main">SWMHS</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/">Main</a></li>
                    <li><a href="/about">About</a></li>
                </ul>
            </div>

        </div>
    </nav>
</header>

about.blade.php

@extends('layout')

@section('content')

<h1 class="text-center">This is the About Page</h1>

@endsection