_breadcrumb.html.haml

.bs-header
  .container
    = render_breadcrumbs :builder => ::BootstrapBreadcrumbsBuilder

application.css.scss

.bs-header {
  font-size: 21px;
  text-align: left;
  padding: 80px 0px 10px 0px;
  background-color: #bdd4de;
  color: #fff;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgb(255, 255, 255);
  border-bottom: 1px solid rgb(229, 229, 229);
}

bootstrap_breadcrumbs_builder.rb

# The BootstrapBreadcrumbsBuilder is a Bootstrap compatible breadcrumb builder.
# It provides basic functionalities to render a breadcrumb navigation according
# to Bootstrap's conventions.
#
# BootstrapBreadcrumbsBuilder accepts a limited set of options:
# * separator: what should be displayed as a separator between elements
#
# You can use it with the :builder option on render_breadcrumbs:
# <%= render_breadcrumbs :builder => ::BootstrapBreadcrumbsBuilder,
# :separator => "&raquo;" %>
#
# Note: You may need to adjust the autoload_paths in your config/application.rb
# file for rails to load this class:
# config.autoload_paths += Dir["#{config.root}/lib/"]
#
class BootstrapBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    if @elements.size > 0
      set_context
    else
      set_element
    end
  end

  def set_context
    @context.content_tag(:ol, class: 'breadcrumb') do
      @elements.collect do |element|
        render_element(element)
      end.join.html_safe
    end
  end

  def set_element
    @elements.collect do |element|
      render_element(element)
    end.join(@options[:separator] || ' &raquo;')
  end

  def render_element(element)
    current = @context.current_page?(compute_path(element))

    @context.content_tag(:li, class: ('active' if current)) do
      link_or_text = @context.link_to_unless_current(compute_name(element),
                                                     compute_path(element),
                                                     element.options)
      link_or_text
    end
  end
end