Adding classes into navigation items

edited July 2014 in Share
If I am loading my navigation in this basic format:

<?php $primaryMenu = fuel_nav(array('group_id' => 'Primary', 'depth' => 1, 'active' => uri_path(), 'cascade_selected' => FALSE, 'return_normalized' => TRUE)); echo $this->menu->render($primaryMenu, 'active', NULL, 'basic'); ?>
How can I get the class "has-dropdown" into the < li > of a navigation item that has a child and class "dropdown" into the < ul > of the child items?


  • edited 3:35AM
    It sounds like you may want to use the "styles" parameter which can be an array of arrays with each one essentially mapping to an li class. You'll need to know the index of your menu items for it to work though. Say you want to set the 2nd menu items class you can do:
    'styles' => array(2 => 'has-dropdown');

    You can also do nested menu items by nesting an array:

    'styles' => array(2 => array(0 => 'has-dropdown'));
  • edited 3:35AM
    So I interpreted your comment on the styles parameter as meaning that you can target a specific menu item but when I added it it looks more like it applies that class to everything within that depth. So when I have added my code like this:

    $primaryMenu = fuel_nav(array('group_id' => 'Primary', 'depth' => 1, 'styles' => array(0 => 'has-dropdown'), 'active' => uri_path(), 'cascade_selected' => FALSE, 'return_normalized' => TRUE));

    it gives every menu item the 'has-dropdown' class on its < li > tag (or if I changed to 'styles' => array(1 => 'has-dropdown') it appeared to give everything that was a child the has-dropdown class).

    Secondly, for the child nav items I need the class to be on the < ul > not individual < li > tags.
  • edited 3:35AM
    OK, I think I figured out what I was doing wrong in the first case and am able to get my 'has-dropdown" class successfully on the correct top level item:

    $primaryMenu = fuel_nav(array('group_id' => 'Primary', 'depth' => 1, 'styles' => array(0 => array(4 => 'has-dropdown')), 'active' => uri_path(), 'cascade_selected' => FALSE, 'return_normalized' => TRUE));

    But my question about the class on its < ul > child still stands.

  • edited July 2014
    There is a "subcontainer_tag_class" parameter you can set which acts similar to the "styles" parameter.
  • edited 3:35AM
    Great! That works perfectly!

    For easy future reference this is what we have for 2 specific nav items with second level navgiation dropdowns. Any that do have a dropdown also have the dropdown class on the sub-container:

    $primaryMenu = fuel_nav(array('group_id' => 'Primary', 'depth' => 1, 'styles' => array(0 => array(4 => 'has-dropdown', 1 => 'has-dropdown')), 'subcontainer_tag_class' => array(0 => 'dropdown'), 'active' => uri_path(), 'cascade_selected' => FALSE, 'return_normalized' => TRUE));
  • edited 3:35AM
    Reopening this old thread because I am trying to do this in another site and I was just wondering if subcontainer_tag_class is an available parameter in 0.9.3 like it is in 1.x. Looking through the User Guide but I'm guessing not as it doesn't seem to be working so far. Is that true?
  • edited 3:35AM
    It is not in 0.9.3.
Sign In or Register to comment.