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.inject([]) do |list, item|
      if item.selected?
        if include_sub_navigation?(item)
          list << content_tag(:li, link_to(item.name, item.url, {method: item.method}.merge(item.html_options.except(:class,:id)))) if item.selected?
          list.concat li_tags(item.sub_navigation)
        else
          list << content_tag(:li, item.name, { class: 'active' }) if item.selected?
        end
      end
      list
    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) =>
  return 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.