Last Updated: February 25, 2016
·
2.579K
· daveobriencouk

Set active states for your middleman navigation

Want to set active states for your middleman navigation?

You'll need to add a helper method to your config.rb. Look for the line that starts helpers do and add the following function:

def nav_active(path)
  current_page.path == path ? {:class => "active"} : {}
end

You should end up with something like this:

helpers do
  def nav_active(path)
    current_page.path == path ? {:class => "active"} : {}
  end

end

Then all you need to do is to call the action on the template, something like this:

%ul.mainNav
  %li{ nav_active('index.html') }
    %a{:href => "/"} Home

I'm using haml as an abstraction markup language, so I place the function between two braces which will set a class of active on the LI if the current_page.path matches the value set in the parameter which should be the path of the link (note, that this includes the index.html if present).

You can always check the current_page.path value by printing it on the template:

= current_page.path

Stay tuned for active classes that run through to the parents.