how do I use partials in Laravel 5?

Question

Today we started our Laravel 5 lessons in school. So I started to search the web to re-use things. I've read some things about sections, components and yielding but I still don't quite understand it.

In my resources/views folder I have a file called home.blade.php. It contains this navigation bar:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/control-panel"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

now in my about.blade.php I'd like to use the same code without copy and pasting. So if I made a change it would change both navigation bars instantly without changing it 2 times.

Can someone explain to me how I re-use this navigation bar without copy and pasting?

Thanks in advance, Sylent.

Solution

Create a new folder and call it partials. There you could have navigation, header and footer all as separate blade files.

You would then (usually) create a layout blade that contains the structure and includes the navigation, header and footer.

You would then extend that layout for home and about, and encapsulate whatever content for each of home and about by creating a section called content.

You would then yield content within the layout.

https://laravel.com/docs/5.5/blade

#navigation /resources/views/partials/navigation.blade.php
<nav>
...
</nav>

#header /resources/views/partials/header.blade.php
<header>
...
</header>


#footer /resources/views/partials/footer.blade.php
<footer>
...
</footer>

#layout /resources/views/layouts/layout.blade.php
@include('partials.header')

@include('partials.navigation')

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

@include('partials.footer')

#home /resources/views/page/home.blade.php
@extends('theme.layouts.layout')

@section('content')
    <p>Anything within home</p>
@endsection

#about /resources/views/page/about.blade.php
@extends('theme.layouts.layout')

@section('content')
    <p>Anything within about</p>
@endsection

Comments

[Sylent]

So I need to make a folder called partials and put my navigation bar in there. Then use @yield('navbar)' in my home.blade.php?

[connormcwood]

@Sylent I updated my post. Above shows the typical format, and how it would work.

[Sylent]

Oh so that's how it works, I couldn't figure it out. I just tried it with just 1 partial and it worked. I greatly appreciate the help. This will make DRY a lot easier I guess

[Jeremy]

Thanks! Had been looking for this for ages, so simple when you lay it out as you have!