Creating a Sidebar with Active Links

Suppose we want to create a sidebar menu that tracks active links.

First, let's create the sidebar container div:

<div id="sidebar-container">

</div>

Assume our data-sidebar-links are being passed from an ERB file:

<div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>

</div>

Now, let's set a title at the top of the sidebar:

<div id="sidebar-container" data-sidebar-links='<%= @sidebar_links %>'>
  <div class="sidebar-heading">
    <%= @title %>
  </div>
</div>

Now, we can loop through each link. We can place an href around a div containing an icon and …

data set sidebar