Navigation
Navigation in FUEL CMS can be used to create various parent/child hierarchical menu structures such as dropdown menus, collapsible menus, breadcrumbs, site maps and page titles.
Programmatically, you can use the fuel_nav helper function to render those structures or you can access the instantiated Fuel_navigation object like so:
// short way
echo fuel_nav(array('render_type' => 'breadcrumb'));
// long way
echo $this->fuel->navigation->render(array('render_type' => 'page_title'));
// additional shortcuts
echo $this->fuel->navigation->basic(); // default
echo $this->fuel->navigation->breadcrumb();
echo $this->fuel->navigation->collapsible();
echo $this->fuel->navigation->page_title();
echo $this->fuel->navigation->delimited();
echo $this->fuel->navigation->data();
Navigation Structures
There are two ways to create navigation structures in FUEL. The first way, is to create a $nav array in the file located at fuel/application/views/_variables/nav.php like below:
fuel/application/views/_variables/nav.php
$nav['about'] = 'About';
$nav['showcase'] = array('label' => 'Showcase', 'active' => 'showcase$|showcase/:any');
$nav['blog'] = array('label' => 'Blog', 'active' => 'blog$|blog/:any');
$nav['contact'] = 'Contact';
// about sub menu
$nav['about/services'] = array('label' => 'Services', 'parent_id' => 'about');
$nav['about/team'] = array('label' => 'Team', 'parent_id' => 'about');
$nav['about/what-they-say'] = array('label' => 'What They Say', 'parent_id' => 'about');
For more on the array syntax you can use to create a navigation structure, visit the Menu Class Library.
The second way, is to input that information in the CMS. Alternatively, you can upload a nav file (fuel/application/views/_variables/nav.php) in the CMS to save you some input time. By default, the fuel_nav() function will first check to see if there is any navigation items saved if the CMS is being used, and if not will use the nav.php file.
Although FUEL provides a way for you to create a navigation item when creating a page, it's important to note that navigation in FUEL is not directly associated with pages which can give you greater flexibility in your structures.
Usage Examples
The most common way to render a navigation structure is to use the fuel_nav() function which is a wrapper around the Menu class.
Page Titles
One of the first places you may want to apply a navigation structure is as a default for the page titles used throughout your site. You can do just that by adding it to the global variables file:
application/views/_variables/global.php (example)
...
$vars['page_title'] = fuel_nav(array('render_type' => 'page_title', 'delimiter' => ' : ', 'order' => 'desc', 'home_link' => 'WidgiCorp - Fine Makers of Widgets'));
...
By adding it to the global variables file you can use it across all pages easily. You specify the render_type parameter to be page_title. The delimiter parameter is the separator used between each level of the page title hierarchy. The order parameter tells it which direction to render the hierarchy (bottom-to-top or top-to-bottom). Lastly, the home_link parameter specifies the text to display when on the homepage.
Top Menu
The second place you may want to use the navigation structure is for perhaps a top menu of your layout:
application/views/_blocks/header.php (example)
...
<?php echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_')); ?>
...
You set the container_tag_id parameter which sets the id value for the container tag (in this case, a <ul>). This allows you to easily target the menu for styling. Additionally, we set the item_id_prefix which sets an id for each menu item, which again can be used for styling. Although the demo site doesn't take advantage of the item_id_prefix in the CSS, we will often use it to set the active state if the menu is using an image sprite and the .active class isn't specific enough.
Side Menu
The side menu works very similar to the top menu. You can set a variable of $sidemenu using the fuel_nav() function again. Alternatively, you could simply use fuel_nav() in your layout file. In some cases, you may want to include container_tag_id parameter like the top menu, but you also include the parent_id in which to render from. For example, if you have a menu structure that includes an about page with several child page (e.g. about/contact, about/history) the parent_id would be the first URI segment of "about". Additionally, if the menu structure had more levels, you could specify the depth parameter to limit how far down the hierarchy you want to display. You could also specify a render_type of 'collapsible' so that it would display a collapsible menu structure based on where you are in the hierarchy.
application/views/_variables/global.php (example)
$vars['sidemenu'] = fuel_nav(array('container_tag_id' => 'sidemenu', 'parent' => uri_segment(1)));
You can merge the $sidemenu variable in using a normal merge in your layouts. You do not use the fuel_var() function because it is not an editable variable:
application/views/_layouts/main.php (example)<?php if (!empty($sidemenu)) : ?> <?php echo $sidemenu; ?> <?php endif ?>
Footer Menu
Another place you may want to add a list of menu items is at the footer of your layout. This can be done similar to both the Top Menu and the Side Menu:
application/views/_variables/global.php (example)
$vars['footermenu'] = fuel_nav(array('container_tag_id' => 'footermenu', 'render_type' => 'delimited'));
application/views/_blocks/footer.php (example)
<footer> <?php echo $footermenu; ?> </footer>
sitemap.xml
Hopefully, you are starting to see the benefits of creating your menu structures in this format. The last thing we'll cover is creating the sitemap.xml. FUEL comes with a sitemap.xml view that you can use. You will need to uncomment the line in the fuel/application/config/routes.php file for it to work. You will also need to add any dynamic pages in the section commented out. For example, you may want to add all the project pages from a project module you created to appear in the sitemap.xml:
application/views/sitemap_xml.php
<?php
/***************************************************************
ATTENTION: To use this dynamic sitemap, you must uncomment the
line in the application/config/routes.php regarding the sitemap
**************************************************************/
fuel_set_var('layout', '');
$default_frequency = 'Monthly';
$nav = fuel_nav(array('return_normalized' => TRUE));
/***************************************************************
Add any dynamic pages and associate them to the $nav array here:
**************************************************************/
$projects = fuel_model('projects'); // won't filter on published because they all should be'
// add project pages
foreach($projects as $project)
{
$key = 'showcase/project/'.$project->slug;
$nav[$key] = array('location' => $key);
}
/**************************************************************/
if (empty($nav)) show_404();
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<?php foreach($nav as $uri=>$page) { ?>
<?php if(isset($page['location'])): ?>
<url>
<loc><?=site_url($page['location'])?></loc>
<?php if (empty($page['frequency'])) : ?><changefreq><?=$default_frequency?></changefreq><?php endif; ?>
</url>
<?php elseif (is_string($page)): ?>
<url>
<loc><?=site_url($page)?></loc>
<changefreq><?=$default_frequency?></changefreq>
</url>
<?php endif; ?>
<?php } ?>
</urlset>
Here, we again use the fuel_nav() function to create the $nav array variable. We then add to that $nav array all the dynamic project pages. Additionally, you can change the $default_frequency variable at the top to change the frequency value for each location.