Create Web Page Navigation

Navigation is used in websites to navigate from one page to another. This navigation is usually located at the top of the webpage. In this tutorial, we will create a view component navigation bar using Bootstrap 3 CSS. So, make sure you have completed the second part of the Introduction tutorial at Introduction Part 2 before continuing with this tutorial. Thus, the view settings, view components, and theme should already be set up and running well.

Create Navigation Bar

Now, we will create a new file on app/view/front/layout/partials/navbar.php with contains navbar bootstrap 3 CSS.

–

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Load navbar into `one_column` layout

Now, we need to load the navbar into a one_column.php layout using this code below.

–

<!DOCTYPE html>
<html>
  <!-- load head.php file as partial html element -->
  <?php $this->getThemeElement('layout/partials/head', $__forward) ?>
  <body>
    <!-- load navbar.php inside body before main content -->
    <?php $this->getThemeElement('layout/partials/navbar', $__forward) ?>
    
    <?php $this->getThemeContent() ?>

    <!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
    <?php $this->getJsFooter(); ?>

    <!-- Load and execute javascript code used only in this page -->
    <script>
      $(document).ready(function(e){
        <?php $this->getJsReady(); ?>
      });
      <?php $this->getJsContent(); ?>
    </script>
  </body>
</html>

Test integration of navbar

Now, its time to test the navbar was loaded properly or not by opening this url on your web browser

–

http://localhost/seme_framework/

Reference

Here is the references:

Create Web Page Navigation

Create Navigation Bar

Load navbar into one_column layout

Test integration of navbar

Reference

Load navbar into `one_column` layout