Renderer::Breadcrumbs

Simon Courtois edited this page May 2, 2014 · 1 revision

simple-navigation can also be used to display the current navigation as breadcrumbs. For example, consider this navigation:

SimpleNavigation::Configuration.run do |navigation|  
  navigation.items do |primary|
    primary.item :books, 'Books', books_path do |books|
      books.item :fiction, 'Fiction', fiction_books_path
      books.item :history, 'History', history_books_path
      books.item :sports, 'Sports', sports_books_path
    end
    primary.item :music, 'Music', musics_path
    primary.item :dvds, 'Dvds', dvds_path
  end
end

When rendered as breadcrumbs and the second level item :sports is active, the breadcrumbs renderer outputs the active primary navigation and the active subnavigation as links concatenated with a customizable character, i.e.:

Books > Sports

You can pass the following options to render_navigation when using the breadcrumbs renderer:

  • :renderer - set to :breadcrumbs to use the breadcrumbs renderer
  • :join_with - to specify the character or string which should be used to join your breadcrumbs (defaults to ' '). If you change this option, do not forget to also specify the whitespace around your join character, e.g. join_with: ' > '. It's safer to use escaped HTML characters when using special characters. You could even consider to escape the whitespace (`join_with: ' > ').
  • :static_leaf - set to true to specify that the deepest item within the current navigation hierarchy should be rendered as static text rather than as a link (defaults to false). (Available from v3.7.0)
  • :prefix - uses prefix to render text or HTML before the breadcrumbs itself. Prefix will not be rendered if there are not breadcrumbs.

For the example above the call:

render_navigation renderer: :breadcrumbs, join_with: ' > '

would generate the output:

<div>
  <a id="books" href="/books">Books</a> &gt; <a id="sports" href="/books/sports">Sports</a>
</div>

By default, the renderer sets the item's key as DOM id for the rendered link element unless the config option autogenerate_item_ids is set to false. The ItemContainer's dom_class and dom_id are applied to the surrounding div element.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.