MIddleman is-active to dropdown menu

#1

Hey so I wasn’t able to find this anywhere so I’m hoping someone can help me

I have a menu with a dropdown in it.

my folder structure looks like this

  • source
    • Home
      - index.html.erb
    • Overview
      - About us (folder)
      - index.html.erb
      - Jobs (folder)
      - index.html.erb
    • Contact

my html looks like this

in my config.rb I have this

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

I am able to add the active class for Home, Contact and in the dropdown menu About us and Jobs. But When I am on the about us or job page I want the Overview to be active as well. Right now it’s not and when I click my dropdown it shows the class active on the page I am on.

How can I get it so it adds it to the parent directory ?

Also another question am I able to add a class to <% link_to %> ?

#2

Just add an additional check in your helper - if the path you are trying to match is “overview” and the current path is “about” or “jobs”, add the class. Pseudo-code below, I’m not sure exactly how you’re matching path parm and current_page.path, so you’ll have to fill in that part of the conditional.

helpers do
  dev nav_active(path)
    if current_page.path == path
      {:class => "active"}
    else
      if [overview/about/jobs condition here]
        {:class => "active"}
      else
        {}
      end
    end
  end
end
#3

Hey thanks for trying to help me out.

But since I’m a newbie what would be the condition that goes in there?
<ul class="header__nav-menu">
<li>
<a class="<%= is_page_selected("/home/") %> js-dropdown-toggle js-switch-toggle header__nav-link tx--upper" href="#" data-switch-id="header-dropdown-1" data-switch-group="header-dropdown"> Home </a>
</li> <li> <a class="<%= is_page_selected("/overview/") %> js-dropdown-toggle js-switch-toggle header__nav-link tx--upper" href="#" data-switch-id="header-dropdown-1" data-switch-group="header-dropdown"> Overview </a> <ul class="header__dropdown container is-hidden js-switch-item" data-switch-id="header-dropdown-1"> <li> <a class="<%= nav_active("/overview/about-us/") %>" href="/overview/about-us/"> About us </a> </li> <li> <a class="<%= is_page_selected("/overview/jobs/") %>" href="/overview/jobs/"> Jobs </a> </li> </ul> </li>

#4

I’ll be honest, I was trying to help you along the path you had chosen, but the way I usually do this is not via the page path (because paths change), but via a variable in the front-matter which I can fix and can assume will not change on a whim. Below is some code I’ve from one of my sites that illustrates how you might do what you’re trying to do using my standard go-to:

In the helpers section of config (or you can put this in custom_helpers.rb file):

   helpers do
      def nav_active(slug, classes = [])
        page_is?(slug) ? classes << "active" : classes
      end

      def page_is?(slug)
        current_page.data.slug.include?(slug)
      end
    end

The first helper method is written with the “classes” default parameter the way it is in order to allow you to pass in other dynamic classes, as necessary, and preserve them with what gets added if the link matches the active page.

The second is written the way it is in order to capture potentially multiple slugs as “active”.

I have split them out into two methods for sake of clarity of my code.

In the navigation HTML:

[li]
  [a href="page1", class=[%= nav_active("page1") %]] Page One[/a]
  [ul]
    [li]
      [a href="page1a", class=[%= nav_active("page1a") %]] Page One - A[/a]
    [/li]
    [li]
      [a href="page1b", class=[%= nav_active("page1b") %]] Page One - B[/a]
    [/li]
[/li]
[li]
  [a href="page2", class=[%= nav_active("page2") %]] Page Two[/a]
[/li]

Here I have replaced “<” and “>” with square brackets so it doesn’t show up as actual page HTML.

In the front matter for page1.html
—
slug: “page1”
—

In the front matter for page1a.html
—
slug: “page1 page1a”
—

In the front matter for page1b.html
—
slug: “page1 page1b”
—

In the front matter for page2.html
—
slug: “page2”
—

So, as you can see, the helper method will add “active” to the nav classes for both the PAGE ONE link and the PAGE ONE A link when the current active page is page1a.html.