Home

Renderers

HTML (extends Base)

Renders the breadcrumb like this:

<p class="breadcrumb">
  <a href="/">Home</a> / Other
</p>

You can pass the following options when creating an HTML renderer:

• active_class the class to use on the active li (default: 'active')
• divider the separator string (inherited from Base as ' / ')
• link_active if true, the active item will be a link, simple text otherwise (default: false)
• link_class the class used for every link in the breadcrumb (default: nil)
• list_class the class used by the breadcrumb container (default: 'breadcrumb')
• list_id the id used by the breadcrumb container (default: nil)

HTML List (extends HTML)

Renders the breadcrumb like this: (default and compatible with Twitter Bootstrap)

<ul class="breadcrumb">
  <li>
    <a href="/">Home</a>
    <span class="divider">/</span>
  </li>
  <li class="active">Other</li>
</ul>

You can pass the following options when creating an HTMLList renderer:

• active_class the class to use on the active li (inherited from HTML as 'active')
• divider the separator string (default: '<span class="divider">/</span>')
• item_class class used by all li elements (default: nil)
• link_active if true, the active item will be a link, simple text otherwise (inherited from HTML as false)
• link_class the class used for every link in the breadcrumb (inherited from HTML as nil)
• list_class the class used by the breadcrumb container (inherited from HTML as 'breadcrumb')
• list_id the id used by the breadcrumb container (inherited from HTML as nil)

Example of a home made renderer

On my last project, I had to use schema.org. Here is what I did:

class SchemaorgHTMLList < Ariane::Render::HTMLList
  def list(crumbs)
    content_tag(:ul, id: options[:list_id], class: options[:list_class], itemprop: 'breadcrumb') do
      raw items(crumbs)
    end
  end
end

Ariane.configure do |config|
  config.default_renderer = SchemaorgHTMLList
end

And it produced the following HTML:

<ul class="breadcrumb" itemprop="breadcrumb">
  <li>
    <a href="/">Home</a>
    <span class="divider>/</span>
  </li>
  <li class="active">Other</li>
</ul>