Table of Contents

Adding the CMSPro Menu

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.

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 } } ?>

Now we should see links like:

<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.

Now lets sort them links out:

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 } ?>
</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 } ?>
    </a>
</li>
<?php } } ?>

Drop-downs are really simple:

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:

<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 == '') {
    ?>
      <li class="nav-item<?php if(!empty($item->childs)){ ?> dropdown<?php }?>">
        <a class="nav-link <?php if(!empty($item->childs)){ ?>dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false<?php}?>" 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>
        <?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
        	}
        ?>
      </li>
      <?php 
      	}
      } 
      ?>
    </ul>
  </div>
</nav>

Tools

menus and quick search

quick search

site status

Page Tools

meta data for this page