Breadcrumb navigation

The breadcrumbs component provides a navigation aid that shows users their current location within your application's hierarchy. They're easy to add to any view with just a few lines of code.

Installation

Copy 
rails g instrumental:breadcrumbs

To insert a breadcrumb navigation into a view:

Copy 
rails g instrumental:breadcrumbs:insert

Demo

Want to see the breadcrumbs navigation in action? Just look at the top of these docs!

Configuring a breadcrumb navigation

A typical breadcrumb navigation should be placed in any view and look something like the the following example (shown on a Post's edit view):

Copy 
<%= content_for(:breadcrumbs) do %>
  <%= render "shared/components/breadcrumbs/breadcrumbs" do %>
    <%= render "shared/components/breadcrumbs/breadcrumb_link",
               text: "Posts",
               link: posts_path %>
    <%= render "shared/components/breadcrumbs/divider" %>
    <%= render "shared/components/breadcrumbs/breadcrumb_link",
               link: post_path(@post),
               text: @post.title %>
    <%= render "shared/components/breadcrumbs/divider" %>
    <%= render "shared/components/breadcrumbs/breadcrumb_link",
               text: "Edit" %>
  <% end %>
<% end %>
Notice how the last `breadcrumb_link` doesn't have a `link` attribute. This is because it's the current page and doesn't need to be a link, so we simply display the text to indicate "you are here".

Customization

Find all of your customization options (via local variables) in these files:

app/views/shared/components/breadcrumbs/_breadcrumbs.html.erb
app/views/shared/components/breadcrumbs/_breadcrumb_link.html.erb

Instrumental Components

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel
Brian Casel
Creator of Instrumental Components
Learn more Send me a question or request