foberleitner/simple-navigation-bootstrap

simple-navigation-bootstrap is a simple-navigation renderer for twitter-bootstrap navigation and dropdowns.

Simple Navigation for Bootstrap

This gem adds a renderer for Simple Navigation to output markup compatible with Twitter Bootstrap.

Getting Started

For Rails >= 3, simply add this gem to your Gemfile:

gem 'simple-navigation-bootstrap'

and run

bundle install

Follow the configuration instructions on the Simple Navigation wiki for initial configuration.

To use the Bootstrap renderer, specify it in your view:

render_navigation :expand_all => true, :renderer => :bootstrap

And the minimal navigation config you need is:

SimpleNavigation::Configuration.run do |navigation|  
  navigation.items do |primary|
    primary.dom_class = 'nav'
  end
end

See below for a more complete example.

Additional Functionality

In addition to generating Bootstrap-comptible list markup, you may specify an :icon attribute on your navigation items, either as an array or string, containing Bootstrap icon classes, to add an icon to the item.

For items with sub-navigation, you may specify :split => true to enable a split dropdown. Split dropdowns allow using an url on the primary navigation item, as well as having a dropdown containing sub-navigation. If you plan on using this feature, in your application.css or equivalent you must require the bootstrap_navbar_split_dropdowns stylesheet after requiring Bootstrap.

For example:

/*
*= require bootstrap_and_overrides
*= require bootstrap_navbar_split_dropdowns
*/

Examples

To create a navigation menu, you might do something like this:

SimpleNavigation::Configuration.run do |navigation|  
  navigation.items do |primary|
    primary.item :music, 'Music', musics_path
    primary.item :dvds, 'Dvds', dvds_path, :split => true do |dvds|
      dvds.item :action, 'Action', dvds_action_path
      dvds.item :drama, 'Drama', dvds_drama_path
    end
    primary.item :books, 'Books', :icon => ['icon-book', 'icon-white'] do |books|
      books.item :fiction, 'Fiction', books_fiction_path
      books.item :history, 'History', books_history_path
    end
    primary.dom_class = 'nav'
  end
end

Caveats

Requires Bootstrap version >= 2.1.0

Further Reading

• Twitter Bootstrap Documentation
• Simple Navigation Wiki

TODO

So far, only nav markup and dropdowns are supported, may also implement buttons and nav lists in the future. And tests, there are currently no tests.