Martynas Sateika

Creating a Bootstrap menu using FuelCMS

Published 2015-06-19

I've been using the Twitter Bootstrap framework in a couple of recent website projects, and since FuelCMS is my PHP framework of choice, I decided to write a utility function to more easily create a dynamic navigation menu. FuelCMS comes with its own helper function fuel_nav that allows the developer to customise its return value in a number of ways, that is, it can either return output formatted to act as bread crumbs, or as a navigation menu, etc. Here is a recursive function that takes the output of fuel_nav as its input, and outputs a Twitter Bootstrap menu.

 * Recursive function that displays items
 * of a fuel_nav in the form of a Bootstrap menu
 * @author Martynas Sateika
 * @param $fuel_nav Menu to display
 * @return string Code of menu
function bootstrap_menu($fuel_nav) {
    $code = '';
    foreach ($fuel_nav as $item) {
        if (isset($item['children'])) {
            $anchor = anchor(
                $item['label'].' ',
                    'class' => 'dropdown-toggle',
                    'data-toggle' => 'dropdown',
                    'role' => 'button',
                    'aria-expanded' => 'false'
            $code .= "";
        } else {
            $anchor = anchor(site_url($item['location']), $item['label']);
            $code .= "
  • $anchor
  • "; } } return $code; }
    In my projects, this function lives in a helper file called my_helper.php in the fuel/application/helpers folder. Here is an example of its usage: <a><nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-c <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <?php echo anchor('/', 'MyWebsite', 'class="navbar-brand"'); ?> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <?php echo bootstrap_menu(fuel_nav(array('render_type' => 'array'))); ?> </ul> </div><!--/.navbar-collapse --> </div> </nav>