fuelcms
Download 1.5.2

Learning FUEL CMS PART 2: Creating Menus and Navigation Structures

Posted on Dec 12, 2010 by David McReynolds

In our last post, Part 1: Creating Pages, Layouts and Blocks, we discussed how we created the pages for the WidgiCorp demo site. In Part 2 of this blog series we will discuss how to link those pages together using one of my favorite aspects of FUEL CMS, creating menus and navigational structures.

The workhorse behind creating these in FUEL is the the fuel_nav() function, which is a wrapper around the Menu class. This function can be used for a myriad of things including dropdown menus, collapsible menus, breadcrumbs, site maps and page titles.

Before we go any further though, make sure you have read the introduction post about the blog series and have downloaded and installed the FUEL CMS 0.91 branch from GitHub.

Navigation Structures

There are two ways to create navigation structures in FUEL. The first way, and the way we've implemented it in the demo site, is to create a $nav array in the file located at fuel/applicaiton/views/_variables/nav.php like below:

fuel/applicaiton/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, click here.

The second way, is to input that information in the navigation module or alternatively, you can upload that nav file. We will discuss this more in Part 4: Using the CMS. The fuel_nav() function will first check to see if there is any navigation items saved, and if not will use the fuel/application/views/_variables/nav.php file.

Page Titles

The first place we can apply this navigation structure is to the page titles. Notice in the global variables file we use the fuel_nav() function to do just that:

application/views/_variables/global.php 
...
$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 we can use it across all pages easily. We specify the render_type parameter to be page_title (other values can be basic, breadcrumb or collapsible). 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.

Now that it's globally declared and available in our view files, we merge that variable in using the fuel_var() function in the header:

application/views/_blocks/header.php 
...
<title><?php echo fuel_var('page_title', '')?></title>
...

The $is_blog variable near the top of the header is set by the blog module so we can use that to test against to render the proper page title. The blog module has it's own method for rendering page titles.

Top Menu

The second place we use the navigation structure is for the top menu in the header block:

application/views/_blocks/header.php

...
<?php echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_')); ?>
...

We set the container_tag_id parameter which sets the id value for the container tag (in this case, a <ul>). This allows us 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. We set a variable of $sidemenu using the fuel_nav() function again. We set the container_tag_id parameter like the top menu, but we also include the parent id in which to render from. In this case, our parent will be the first URI segment. For the demo site, the about section has several pages under it, and they all have a parent_id of 'about'. So all pages with their a parent_id of 'about' will appear in the side menu. 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 
$vars['sidemenu'] = fuel_nav(array('container_tag_id' => 'sidemenu', 'parent' => uri_segment(1)));

We merge the $sidemenu variable in using a normal merge in the main layout. We do not use the fuel_var() function because it is not an editable variable:

application/views/_layouts/main.php 
<?php if (!empty($sidemenu)) : ?>
<?php echo $sidemenu; ?>
<?php endif ?>

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, we may want to add all the project pages as displayed below:

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.

That's it for Part 2: Creating Menus. We encourage you to join the community, sign up for our newsletter below, and/or follow us on Twitter, to stay informed on the latest FUEL CMS news. Stay tuned for Part 3: Creating Modules.

Comments have been turned off for this post.


  Back to Top