Twitter Bootstrap integration

See "#72":https://github.com/andi/simple-navigation/issues/72 for more discussion on this topic.

Breadcrumbs custom renderer (from @JeanMertz)

A custom renderer for breadcrumbs:

class BootstrapBreadcrumbs < SimpleNavigation::Renderer::Base
  def render(item_container)
    content_tag :ul, li_tags(item_container).join(join_with), {
      id: item_container.dom_id,
      class: "#{item_container.dom_class} breadcrumb"
    }
  end

  protected

  def li_tags(item_container)
    item_container.items.each_with_object([]) do |item, list|
      next unless item.selected?

      if include_sub_navigation?(item)
        options = { method: item.method }.merge(item.html_options.except(:class, :id))
        list << content_tag(:li, link_to(item.name), item.url, options)
        list.concat li_tags(item.sub_navigation)
      else
        list << content_tag(:li, item.name, { class: 'active' })
      end
    end
  end

  def join_with
    @join_with ||= options[:join_with] || '<span class="divider">/</span>'.html_safe
  end
end

The jQuery approach (from @hmasing)

Another approach is to let jQuery do the work. After rendering the navigation using the List renderer, use the following JavaScript:

/* ==========================================================
 * Attach bootstrap tab behavior to the tabbed navigation
 * ========================================================== */
$('#navigation_tabs ul').first().addClass('tabs');
$('#navigation_tabs ul li ul').addClass('dropdown-menu');
$('#navigation_tabs ul li ul').parent().addClass('dropdown');
$('#navigation_tabs ul li.dropdown').children('a').addClass('dropdown-toggle');
  
/* Remove the active class from sublist items - the styles don't accomodate it */
$('ul.tabs ul.dropdown-menu li.active').removeClass('active');
  
/* Add the classes to trigger the bootstrap JS behavior */
$('#navigation_tabs ul li ul').parent().attr('data-dropdown', 'dropdown');
$('ul.tabs').attr('data-tabs','tabs');

jQuery + CoffeeScript approach (from @weblee)

Using jQuery to generate a navigation menu (using CoffeeScript), again after rendering using the List renderer:

$('#navigation ul li ul').addClass('dropdown-menu')
$('#navigation ul li ul').parent().addClass('dropdown')
$('#navigation ul li.dropdown').children('a').addClass('dropdown-toggle')
$('#navigation ul li.dropdown').children('a').html (index, text) =>
  text + '<b class="caret"></b>' 
$('#navigation ul li ul').prev().attr('data-toggle','dropdown')
$('#navigation ul li ul').children('li').removeClass('active')

Topbar navigation

See this gist of a custom renderer. BootstrapTopbarList for simple-navigation and Twitter Bootstrap integration.

simple-navigation-bootstrap Gem

Alternatively, add simple-navigation-bootstrap to your Gemfile and set the renderer to :bootstrap.

Another custom renderer (from @jalberto)

See this gist of an alternative custom renderer. simple-navigation render for twiter bootstrap nav-list.

simple_navigation_renderers Gem (from @ShPakvel)

simple_navigation_renderers Gem provides two renderers: for Bootstrap 2 and for Bootstrap 3.

With it you can easily create bootstrap's menu with submenus, dividers and headers. You also can split items with submenu and add icons to menu.