Add Breadcrumb Navigations to Rails App

Notes


Making it very easy for users to navigate your application is key to creating a highly usable app. A tried and true method of accomplishing this is using breadcrumbs. Bootstrap offers us some styling to easily create a visually appealing breadcrumb section in our application.

In our application's app/views/courses/show.html.erb, drop down under our container div and copy the Bootstrap breadcrumb styling into our app. Make sure to change the attributes and text of the HTML accordingly.

<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page"><%= @course.title %></li>
   </ol>
</nav>

Now if we visit the show page for a course we can see the breadcrumb displayed and it's easy to get back home. We need to do the same thing for our module. The goal is to get back to the Course then Home. This time in app/views/units/show.html.erb copy the breadcrumb HTML again and change then let's change it to fit our needs.

<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <%= link_to @unit.course.title, @unit.course, class: 'breadcrumb-item' %>
      <li class="breadcrumb-item active" aria-current="page"><%= @unit.title %></li>
   </ol>
</nav>

Then let's just keep trickling down to the third layer of our object relationships (Course -> Unit -> Lesson). It's time to repeat the process for the Lesson object's show view.

<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <%= link_to @lesson.unit.course.title, @lesson.unit.course, class: 'breadcrumb-item' %>
      <%= link_to @lesson.unit.title, @lesson.unit, class: 'breadcrumb-item' %>
      <li class="breadcrumb-item active" aria-current="page"><%= @lesson.title %></li>
   </ol>
</nav>

And that's it for implementing breadcrumbs into our application!

Happy coding!!!!