home-icon
Navigations
Last updated: May 30, 2024

Introduction

One of the core features of WebIgniter is navigations.

This feature allows to easily create navigation structures like a menu bar, footer or any kind of navigation. The index on the left side of this page is created by a navigation.

There are 2 kinds of navigation methods. You can either choose to manually add the items to the navigation, or choose a category, and let the navigation builder build a dynamic navigation for you.

Navigations are available in all section and layout files.

Creating a navigation - Manual navigation

To create a manual navigation, go to: 'Navigations' and click 'Add navigation'. Enter a name for your navigation, this name is nowhere shown on your website, it's for your own reference. Leave the toggler for 'Automatic building' off to have a manually managed navigation and click 'Create'.

This will bring you back to the navigations overview. Now click on the newly created navigation.

To add your first item to the navigation click 'Add navigation item' in the top-right corner. A popup is shown where you can enter the details of the item. The name of the item is the name the link should have (not the destination). If you want to navigation item to point to previously added content, you can select the content from the dropdown list. If you wish to use an external link for this item, you can specify this in the last input field. If you specify both, the content will take precedence over the external link. You can now click 'Save' to save the navigation item.

Note that if you have linked to content, the navigation is automaticly updated when for some reason the url of the content changes.

Repeat 'Add navigation' for all of your desired navigation items. Once the list is complete and all your navigation items are present, you can rearrange them if you like by using drag and drop. You can also put items as a child under another item up to 3 levels deep.

Once you're finished arranging the items, click 'Save navigation order' to save the order.

Creating a navigation - Automatic navigation

The other way to create a navigation is by automatic building. To create such a navigation click 'Add navigation', specify a name and switch on 'Automatic building'. On doing so 2 extra fields will appear. In 'Category' you select the category from the dropdown you would like to use for this navigation. All content from this category will be automaticly added to the navigation. The depth specifies how many layers of subcategories should be added. You can specify 1 for only direct content from the chosen category, up to 3 to have 3 layers of categories and subcategories added to the navigation.

Please be aware that if you choose automatic navigation, it's not possible to rearrange items. But if you add, change or remove pages to the specififed category, the navigation is automaticly updated.

Display a navigation

Now that we have added and populated our navigation, it's time to display our navigation into our partial or layout file.

The navigation is accesible by using the Webigniter getNavigation method. You can loop through the items and subitems like this.

<?php foreach($webigniter->getNavigation(handle: 'topmenu') as $menuItem):?>
   <a href="<?=$menuItem['link'];?>"><?=$menuItem['name'];?></a>
   <?php if(count($menuItem['children']) > 0):?>
      <?php foreach($menuItem['children'] as $childItem):?>
            <a href="<?=$childItem['link'];?>"><?=$childItem['name'];?></a>
      <?php endforeach;?>
   <?php endif; ?>
<?php endforeach;?>

The handle can be found in the navigations overview in the CMS, when logged in as an admin.

This will create a list of items and subitems. You can go op to 3 layers of subcategories.

This wil retreive al navigation items of the navigation with the handle 'topmenu'. The php foreach statement tells the section to loop through all items and store each item in the variable $menuItem. You see you can retreive the link and the name of the navigation item by using <?=$menuItem['link'];?> and <?=$menuItem['link'];?>.
You can also count the number of child items, and if there are more than 0 children, you can do another foreach (loop) on the children.