SimpleNavigationRenderers

This gem adds several Simple Navigation renderers.
For now, it is include renderers for:

With these renderers you can create any bootstrap navigation elements, such as: submenus, dividers, headers. As well as add icons to menu elements, such as: gliphicons, font-awesome icons, even custom icons.

Installation

Add this line to your application's Gemfile:

gem 'simple_navigation_renderers'

and then execute:

$ bundle

Or install it yourself as:

$ gem install simple_navigation_renderers

Usage

Set up renderer

There are two ways to say that you want to use any of renderers.

You can specify it in you view as a parameter to render_navigation:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Name", root_path, class: "navbar-brand" %>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">

      <%= render_navigation( expand_all: true, renderer: :bootstrap3 ) %>

    </div>
  </div>
</nav>

Or you can set it in the very navigation configuration file (e.g. config/navigation.rb):

SimpleNavigation::Configuration.run do |navigation|
  navigation.renderer = SimpleNavigationRenderers::Bootstrap2
  # navigation itself goes here...
end

I think you already using simple-navigation gem and know how to define navigation items.
If not, you can always look at the configuration instructions on the Simple Navigation wiki or read comments and examples in the generated by default config/navigation.rb file.

In addition to standard options you can use ones specific for Bootstrap renderers.
Lets look at the example:

SimpleNavigation::Configuration.run do |navigation|
  navigation.renderer = SimpleNavigationRenderers::Bootstrap3
  navigation.items do |primary|
    primary.item :news, {icon: "fa fa-fw fa-bullhorn", text: "News"}, news_index_path, highlights_on: :subpath
    primary.item :concerts, "Concerts", concerts_path, highlights_on: :subpath
    primary.item :video, "Video", videos_path, highlights_on: :subpath
    primary.item :info, {icon: "fa fa-fw fa-book", title: "Info"}, info_index_path, divider: true, split: true, highlights_on: :subpath do |info_nav|
      info_nav.item :main_info_page, "Main info page", info_path(:main_info_page)
      info_nav.item :about_info_page, "About", info_path(:about_info_page)
      info_nav.item :misc_info_pages, "Misc.", divider: true do |misc_page|
        misc_page.item :header_misc_pages, "Misc. Pages", header: true
        Info.all.each do |info_page|
          misc_page.item :"#{info_page.permalink}", info_page.title, info_path(info_page)
        end
      end
      info_nav.item :contact_info_page, "Contact", info_path(:contact_info_page), divider: true
    end
  end
end

Specific options used in the example:

:split - Use it to split first level item link with caret. If you add split: true option to item, then caret itself will toggle first level submenu and link will have standard behaviour, instead of toggle submenu. You can use :split only with first level items, for the rest it will not do anything.
:divider - Use it to add Bootstrap divider before item. if you add divider: true option to first level item, then it will first create addition li-tag with divider-vertical Bootstrap 2 class and after that create li-tag for item itself. (You can add divider-vertical class to Bootstrap 3 - see below) For the second level item and deeper it will create li-tag with class divider (the same in Bootstrap 2 and 3)
:header - Use it to add Bootstrap menu header. If you add header: true option to item, then all parameters, except :name and :divider option, will be ignored. You can use :header only with submenus, for the first level items it will not do anything.
:name hash - Use it in place of :name if you want. Hash can have three keys: :text, :icon and :title, which is only recognized. You can use it together or separatly, but at least one of :text and :icon parameters should be provided. For example:
- {text: "News", icon: "fa fa-fw fa-bullhorn"} will create Font Awesome icon and add text after it (name of the item)
- {icon: "glyphicon glyphicon-book", title: "Info"} will create Bootstrap icon with title without any text after it

Caveats

Bootstrap 3 has only one level submenu. If you want to use nested submenus as in example above, import bootstrap2_dropdown_submenu.css.scss file into your Sass file (e.g. application.css.scss) as following:
```
@import "bootstrap2_dropdown_submenu";
```
Bootstrap 3 has not divider-vertical class. If you want to use it as in example above, import bootstrap2_navbar_divider_vertical.css.scss file:
```
@import "bootstrap2_navbar_divider_vertical";
```
You may also want to include following file which changes some first level submenu style:
```
@import "simple_navigation_bootstrap_overrides";
```

or you can add them all together:

@import "simple_navigation_bootstrap";

Result

Thus, above example will produce something like following code:

<ul class="nav navbar-nav">
  <li class="active simple-navigation-active-leaf" id="news">
    <a href="/news_index_path"><span class="fa fa-fw fa-bullhorn"></span> News</a>
  </li>
  <li id="concerts"><a href="/concerts_path">Concerts</a></li>
  <li id="video"><a href="/videos_path">Video</a></li>
  <li class="divider-vertical"></li>
  <li class="dropdown-split-left" id="info">
    <a href="/info_index_path"><span class="fa fa-fw fa-book" title="Info"></span></a>
  </li>
  <li class="dropdown dropdown-split-right">
    <a class="dropdown-toggle" data-target="#" data-toggle="dropdown" href="#"><b class="caret"></b></a>
    <ul class="pull-right dropdown-menu">
      <li id="main_info_page"><a href="/info/main_info_page">Main info page</a></li>
      <li id="about_info_page"><a href="/info/about_info_page">About</a></li>
      <li class="divider"></li>
      <li class="dropdown-submenu" id="misc_info_pages">
        <a href="#">Misc.</a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Misc. Pages</li>
          <li id="page1"><a href="/info/page1">Page1</a></li>
          <li id="page2"><a href="/info/page2">Page2</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li id="contact_info_page"><a href="/info/contact_info_page">Contact</a></li>
    </ul>
  </li>
</ul>

Test

Just run following commands:

$ bundle
$ rake

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request