GitHub license GitHub release Gem Gem Build Status Code Climate Test Coverage Dependency Status

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

With these renderers you will be able create any Bootstrap navigation elements, such as: submenu, navbar-text, divider, header. As well as add icons to menu elements, such as: Glyphicons, Font Awesome icons, even custom icons. Also you have split option for main menu containing submenu.

This gem is a fork of ShPakvel/simple_navigation_renderers. After a year of waiting for PR merge without any news from the author, I decided to fork it.

This gem is compatible with SimpleNavigation 4.x.


Add this line to your application's Gemfile:

gem 'simple_navigation_bootstrap'

and then execute:

$ bundle install

Or install it yourself as:

$ gem install simple_navigation_bootstrap


Simply set up renderer and you are done!!

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

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

      <%= render_navigation(expand_all: true, renderer: :bootstrap2) %>
      # Or
      <%= render_navigation(expand_all: true, renderer: :bootstrap3) %>
  2. Or you can set it in the very navigation configuration file (e.g. config/navigation.rb): do |navigation|
      navigation.renderer = SimpleNavigationBootstrap::Bootstrap2
      # or
      navigation.renderer = SimpleNavigationBootstrap::Bootstrap3
      # navigation itself goes here...

Explicit example of using all features

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: do |navigation|
  navigation.renderer = SimpleNavigationBootstrap::Bootstrap3

  navigation.items do |primary|
    primary.item :news, { icon: 'fa fa-fw fa-bullhorn', text: 'News' }, news_index_path
    primary.item :concerts, 'Concerts', concerts_path
    primary.item :video, 'Video', videos_path
    primary.item :divider_before_info, '#', divider: true
    primary.item :info, { icon: 'fa fa-fw fa-book', title: 'Info' }, info_index_path, split: true 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.' 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)
      info_nav.item :divider_before_contact_info_page, '#', divider: true
      info_nav.item :contact_info_page, 'Contact', info_path(:contact_info_page)
    primary.item :signed_in, 'Signed in as Pavel Shpak', navbar_text: true


Specific options used in the example:

Option Description
: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.
:navbar_text Use it as navbar_text: true to add Bootstrap navbar-text.
:divider Use it to add Bootstrap menu divider. if you add divider: true option to first level item, then it will create li-tag with divider-vertical Bootstrap 2 class. (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 (which exists in both, Bootstrap 2 and 3).
:header Use it as header: true to add Bootstrap menu header. 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.

Example for :name hash:


  1. 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";
  2. 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";
  3. You may also want to include following file which changes some first level submenu style:

    @import "simple_navigation_bootstrap_overrides";
  4. or you can add them all together:

    @import "simple_navigation_bootstrap";


Just run following commands:

$ bundle install
$ rake


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


A big thank to them for their contribution!