So you would like to customise your Template navigation on your new template? It's very easy to do however as every navigation is different this time we'll show you how to do it step by step, and at the bottom of the page we'll have the default Bootstrap 4 navigation.

Improvements made!

In Alpha 12, we've added a change to the menu which changes the whole dynamic of the menu, so we're letting you know the final Bootstrap 4 code at the bottom allows this already, but we supported Logged in, Guest and Everyone for menu links. So this isn't mentioned in the tutorial below. But you can edit the final code after you know how it works.

All you have to do is change the foreach down to the bottom with the code.


Find your navigation it should start with <nav
Example: <nav class="navbar navbar-expand-lg navbar-light bg-light">

Start

Time to set started, so after you've found the start of the navigation we need to find where the links are going:

Find:

<div class="navbar-nav">
This is the default section for the navigation.

After that we want to add the php code:

<?php
if(!empty($menu_items)){
    foreach ($menu_items as $item) if ($item->parent == '') {
?>
<?php } } ?>
This checks to see if the $menu_items has any links and then foreach one it will show the links.

So it should look like:

<ul class="nav navbar-nav">
<?php
if(!empty($menu_items)){
	foreach ($menu_items as $item) if ($item->parent == '') {
?>
<?php } } ?>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>

We need to change this to add our own links so remove the others and keep a dropdown menu if you have one in the code that's the hardest bit as every template has a different way of doing them.

You'll need to replace the <a href="#"></a> with the following:

<a href="<?php if($item->target != 'newtab'){ ?>
//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); 
}else{ 
echo $item->uri; 
} ?>" <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>>
<?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
</a>

So this checks if the target is set to a New Tab, if it does NOT give it then it shows the full url of the hostname for Blesta (your website) and the language for the page (for multi-languages) and then the url for the link item.
It then checks if it HAS been set to a new tab to set the target="blank".

So that's the way to do the Links, however if you have a dropdown menu, you'll need to do add the following...

So your current nav should look something like:

<ul class="nav navbar-nav">
<?php
if(!empty($menu_items)){
	foreach ($menu_items as $item) if ($item->parent == '') {
?>
<li>
    <a href="<?php if($item->target != 'newtab'){ ?>
    //<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); 
    }else{ 
    echo $item->uri; 
    } ?>" <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>>
    <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
    </a>
</li>
<?php } } ?>

However they are all different so you need to do this around your dropdown, as you have a paid license feel free to open a ticket or live chat session or even on discord in the BlestaCMS Pro section.

Our example will be:

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
 </div>
Example from Bootstrap

So we now need to edit the dropdown menu by adding the php to only display the drop-downs when the menu item has child's:

<?php
	if (!empty($item->childs)) {
?>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
 </div>
 <?php
 	}
 ?>
The php code checks if the $item has child's

So we have that sorted we now need to do the same as before the foreach for each item child like so:

<?php
	if (!empty($item->childs)) {
?>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
	<?php
		foreach ($item->childs as $child) {
	?>
   	<a class="dropdown-item" href="#">
    	Action
    	</a>
    <?php
    	}
    ?>
 </div>
 <?php
 	}
 ?>
So now we've got the foreach we can start doing the items like the above however we use $child not $item.

So we need to do as before:

<?php
	if (!empty($item->childs)) {
?>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
	<?php
		foreach ($item->childs as $child) {
	?>
   	<a class="dropdown-item" href="<?php if($child->target != 'newtab'){ ?>
    //<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); 
    }else{ 
    echo $child->uri; 
    } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
    	<?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
    </a>
    <?php
    	}
    ?>
 </div>
 <?php
 	}
 ?>
And we have it done!

And there you have it, I need to work out a way to tidy that up but that's the principle. I have added the code below for the final Bootstrap 4 version.

Bootstrap 4 final version (Updated):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <?php
                                    if(!empty($menu_items)){
                                      foreach ($menu_items as $item) if ($item->parent == ''){
                                        if($item->permissions == 'all') {
                                ?>
                                <li class="nav-item<?php if (!empty($item->childs)) { ?> dropdown dropdown-xl no-caret<?php } ?>">
                                  <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" class="nav-link <?php if(!empty($item->childs)) { ?>dropdown-toggle" id="navbarDropdownPages" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"<?php }else{ echo '"'; } ?> <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>>
                                    <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
                                    <?php if (!empty($item->childs)) { ?>
                                      <i class="fas fa-chevron-right dropdown-arrow"></i>
                                    <?php } ?>
                                  </a>
                                  <?php
                                    if(!empty($item->childs)) {
                                  ?>
                                    <div class="dropdown-menu dropdown-menu-right animated--fade-in-up" aria-labelledby="navbarDropdownPages">
                                        <div class="row no-gutters">
                                            <div class="col-lg-1 p-lg-5">
                                                <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?></h6>
                                                <?php
                                                  foreach ($item->childs as $child) {
                                                    if($child->uri == "#"){
                                                ?>
                                                <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?></h6>
                                              <?php }else{ ?>
                                                  <a class="dropdown-item" href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
                                                    <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
                                                  </a>
                                                <?php
                                                    }
                                                  }
                                                ?>
                                                <div class="dropdown-divider border-0 d-lg-none"></div>
                                            </div>
                                        </div>
                                    </div>
                                  <?php } ?>
                                </li>
                              <?php
                              }
                            }foreach ($menu_items as $item) if ($item->parent == ''){
                              if($item->permissions == 'logged' && !empty($this->Html->ifSet($logged_in))) {
                            ?>
                            <li class="nav-item<?php if (!empty($item->childs)) { ?> dropdown dropdown-xl no-caret<?php } ?>">
                              <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" class="nav-link <?php if(!empty($item->childs)) { ?>dropdown-toggle" id="navbarDropdownPages" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"<?php }else{ echo '"'; } ?> <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>>
                                <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
                                <?php if (!empty($item->childs)) { ?>
                                  <i class="fas fa-chevron-right dropdown-arrow"></i>
                                <?php } ?>
                              </a>
                              <?php
                                if(!empty($item->childs)) {
                              ?>
                                <div class="dropdown-menu dropdown-menu-right animated--fade-in-up" aria-labelledby="navbarDropdownPages">
                                    <div class="row no-gutters">
                                        <div class="col-lg-1 p-lg-5">
                                            <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?></h6>
                                            <?php
                                              foreach ($item->childs as $child) {
                                                if($child->uri == "#"){
                                            ?>
                                            <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?></h6>
                                          <?php }else{ ?>
                                              <a class="dropdown-item" href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
                                                <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
                                              </a>
                                            <?php
                                                }
                                              }
                                            ?>
                                            <div class="dropdown-divider border-0 d-lg-none"></div>
                                        </div>
                                    </div>
                                </div>
                              <?php } ?>
                            </li>
                            <?php
                              }
                            }foreach ($menu_items as $item) if ($item->parent == ''){
                              if($item->permissions == 'guests' && empty($this->Html->ifSet($logged_in))){
                            ?>
                                <li class="nav-item<?php if (!empty($item->childs)) { ?> dropdown dropdown-xl no-caret<?php } ?>">
                                  <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" class="nav-link <?php if(!empty($item->childs)) { ?>dropdown-toggle" id="navbarDropdownPages" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"<?php }else{ echo '"'; } ?> <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?>>
                                    <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?>
                                    <?php if (!empty($item->childs)) { ?>
                                      <i class="fas fa-chevron-right dropdown-arrow"></i>
                                    <?php } ?>
                                  </a>
                                  <?php
                                    if(!empty($item->childs)) {
                                  ?>
                                    <div class="dropdown-menu dropdown-menu-right animated--fade-in-up" aria-labelledby="navbarDropdownPages">
                                        <div class="row no-gutters">
                                            <div class="col-lg-1 p-lg-5">
                                                <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?></h6>
                                                <?php
                                                  foreach ($item->childs as $child) {
                                                    if($child->uri == "#"){
                                                ?>
                                                <h6 class="dropdown-header text-primary"><?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?></h6>
                                              <?php }else{ ?>
                                                  <a class="dropdown-item" href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>>
                                                    <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?>
                                                  </a>
                                                <?php
                                                    }
                                                  }
                                                ?>
                                                <div class="dropdown-divider border-0 d-lg-none"></div>
                                            </div>
                                        </div>
                                    </div>
                                  <?php } ?>
                                </li>
                              <?php
                                  }
                                }
                              }
                              ?>
    </ul>
  </div>
</nav>