Skip to content

Twitter Bootstrap integration

Simon Courtois edited this page · 2 revisions

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"


  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.url, options)
        list.concat li_tags(item.sub_navigation)
        list << content_tag(:li,, { class: 'active' })

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

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').removeClass('active');

/* Add the classes to trigger the bootstrap JS behavior */
$('#navigation_tabs ul li ul').parent().attr('data-dropdown', 'dropdown');

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.

Something went wrong with that request. Please try again.