Twitter Bootstrap integration

See #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.

simple_navigation_bootstrap Gem (by @n-rodriguez, forked from @ShPakvel)

simple_navigation_bootstrap 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.

This gem is compatible with SimpleNavigation 4.x.