Todo Laravel Project

Todo Laravel Project - Navigation bar

Laravel Project

← Prev Next →

In this Laravel project tutorial we will create the navigation bar for the website.

For this project the navigation bar or nav bar will be same for all the pages. So, it is logical to create the nav bar inside the master layout.

Feel free to create the nav bar in any other file and include it in your pages. I will always encourage you to experiment with the code.

Alright, lets get started.

The nav bar

Open app.blade.php file which is inside the resources/views/layouts directory and add the following code above the @yield('content') line.

<!doctype html>
<html>
<head>
  <title>@yield('title')</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

</head>
<body>

  <!-- navigation bar -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 offset-sm-3 col-md-6 offset-md-3">
        
        <ul class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/active">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/done">Done</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/todo/deleted">Deleted</a>
          </li>
        </ul>
        
      </div>
    </div>
  </div>
  <!-- navigation bar ends here -->


  @yield('content')


  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

</body>
</html>

If we now open the home page we will get to see the following output.

Where, the home link will take us to the home page.

The Active link will take us to the page listing all the ACTIVE todo tasks.

Similarly, the Done and Deleted links will take us to the pages listing all the DONE and DELETED todo tasks respectively.

Okay, in the next tutorial we will create the views for the Active, Done and Deleted page.

See you there. Have fun coding.

← Prev Next →