flobraeuer/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

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.

Furthermore you can add a .brand paragraph-tag, just with

navigation.brand = 'Example Brand'

Examples¶ ↑

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

SimpleNavigation::Configuration.run do |navigation|
  navigation.brand = 'Entertainment Store'
  navigation.items do |primary|
    primary.item :music, 'Music', musics_path
    primary.item :dvds, 'Dvds', dvds_path
    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¶ ↑

Because Bootstrap only supports dropdown on-click, items with sub-navigation may not contain links - any links will be overwritten with a # anchor.

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.