Styling

All the render_* methods generate their output using a renderer which can be configured in the config/navigation.rb file. The default renderer (when no specific renderer is defined) renders an HTML unordered list. For example, render_navigation(level: 1) for our example would output (with the 'Music' item being active):

<ul>
  <li id="books"><a href="/books">Books</a></li>
  <li id="music" class="selected"><a href="/musics" class="selected">Music</a></li>
  <li id="dvds"><a href="/dvds">Dvds</a></li>
</ul>

As you can see the active navigation item has the class 'selected' applied on the li as well as the contained link element. The class applied to the active navigation item is configurable in the config/navigation.rb file.

Additionally each li element gets an id which by default matches the key for that navigation item. This is useful if you have to specifically refer to your navigation items in your CSS files, e.g. for creating icon-based navigation items where each item gets its own background image. You have the following options to change the id of a li element:

• Completely turn off automatic id generation by setting navigation.autogenerate_item_ids = false in your navigation config-file.
• Explicitly set the id of a li item by specifying the :id option:

primary.item :books, 'Books', books_path, html: {id: 'my_special_id'}

• Define the logic that automatically generates the id for the li elements. You can do this by providing a proc in the config-file. The proc will be called with the key of the current item. For example, to give all the ids a special prefix, you would define a proc like this:

navigation.id_generator = proc { |key| "my-prefix-#{key}" }

It is usually a good idea to render a navigation as unordered list since you can style an Html list to basically look like anything you like using css.

Styling Examples

If you would like to see some examples (with downloadable CSS and SASS files) go to the online demo page.