Skip to Content search facebook instagram pinterest twitter youtube

Navigation

Website navigation can be output using the Navigation helper class.

Using the Navigation::simpleMenu class to output a site navigation list

<?php use Sprout\Helpers\Navigation; ?>
 
<?php Navigation::simpleMenu(); ?>

FrankenMenu

The default skin included in SproutCMS includes a menu system called FrankenMenu to provide responsive styling and functionality. The Navigation::simpleMenu() function will output a list with classes and structure compatible with FrankenMenu if you wish to use it in your own skin. You can read the documentation for FrankenMenu here: https://karmabunny.github.io/frankenmenu/

MegaMenus

You can also use SproutCMS to build a MegaMenu-style navigation system.

Navigation groups

You can specify page navigation groups for top-level pages using the config option 'nav_groups' in config/sprout.php. It accepts an array containing both the page ID and the number of navigation groups to be assigned to that page.

Example: Setting the nav_groups config

/*
 * Page with ID '2' will have 3 navigation groups
 * Page with ID '3' will have 2 navigation groups
 */
$config['nav_groups'] = array(
    '2' => 3,
    '3' => 2,
);

Once the config has been set, you'll find a new link called Manage menu groups under the SproutCMS in the Pages tab Tools sidebar. On this page you can set the names of your groups, and optionally assign an image to your top-level navigation item which can be displayed in your MegaMenu.

Navigation groups

Once your groups have been setup, you can start assigning pages to the groups. This is managed within the Page Settings area under the dropdown Menu group.

nav-groups-settings

Rendering the MegaMenu

SproutCMS has an in-built function that will output a Megamenu list compatible with FrankenMenu called NavigationMenu.

This takes pages from the Navigation Groups you have set and sorts them into separate lists underneath the top-level pages.

The MegaMenu dropdown layout is set by the view navigation_dropdown.php in sprout/views/navigation_dropdown.php.

Using the NavigationMenu::render class to output a megamenu site navigation list

<?php use Sprout\Helpers\NavigationMenu; ?>
 
<?php echo NavigationMenu::render(); ?>