Active / current menu item and Tailwind css

Pinegrow WP
1

In the documentation on Menus in the word press section it states

And that’s it. Our menu works and Pinegrow even figures out the name of the class that marks the active menu item.

I’ve been playing with the default flowbite navbar menu whose relevant bit of code for the menu is structured thus:

 <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
        </li>
        <li>
          <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
        </li>
      </ul>
    </div>

I’ve tried adding class="active2 to the first li tag and then active:text-blue-700 to the classes in the the a tag of the list but nothing happens.

I suspect I’m doing something silly. Is there an example anywhere of this sort of thing working in a WordPress theme?

2

@Dom I’ve spent more time than I care to admit working with WP menus. What exactly are you trying to accomplish and where are you running into issues?

Be aware that a few things are happening when you make a WP menu in Pinegrow. First, Pinegrow uses its Menu Walker to translate your HTML menu to use in WordPress and to add the relevant classes, then you still need to style the classes and add any interactions you want for drop-down, etc.

Bootstrap 4 made it all pretty easy since they had built in support for most of the things WP does, but Tailwind relies on you to build out the logic. I’ve done it in both Pinegrow Interactions and Alpine.js and they both work fine.

I agree though, that this is one of those areas that needs a lot of updates and clarifications in the Pinegrow documentation. Menus are confusing enough when you are building them in HTML, and downright infuriating when you throw a CMS into the mix. “It just works” is definitely not applicable here.

1 Like
3

@adamslowe Essentially I’m trying to achieve a result where if I am for example on the home page then The relevant menu item will be red as opposed to say a normal colour of black.

I have the menu picking up the WordPress menu without issue, I am assuming that the classes set on the first li tag are what Pinegrow then uses to determine the styling but of course one should never assume.

The interactions work nicely now, I’d like to get my head firmly wrapped around where Pinegrow is determining the styling from and then lastly I will turn to accessibility which I anticipate will cause problems.

4

I wouldn’t try to mess with trying to style current links with Tailwind. This is one of those places where regular CSS is a bit more appropriate.

Knowing that WP applies a .current_page_item class to the li element for the active page, you can just write a simple rule like the one below.

.current_page_item a {
    color: red;
}

Also, I’m pretty sure WP still doesn’t add the aria-current="page" attribute by default, and I doubt Pinegrow does it for us either. I have the following snippet in my custom.php to handle that for me.

/**
 * Adds aria-current-"page" to the menu item for the current page
 */
function add_attribute_to_current_menu_item( $atts, $item, $args ) {
    // check if this item represents the current post
    if ( $item->object_id  == get_the_ID() ) 
    {
        // add the desired attributes:
        $atts['aria-current'] = 'page';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_attribute_to_current_menu_item', 10, 3 );
1 Like
5

[quote=“adamslowe, post:4, topic:7665”]

/**
 * Adds aria-current-"page" to the menu item for the current page
 */
function add_attribute_to_current_menu_item( $atts, $item, $args ) {
    // check if this item represents the current post
    if ( $item->object_id  == get_the_ID() ) 
    {
        // add the desired attributes:
        $atts['aria-current'] = 'page';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_attribute_to_current_menu_item', 10, 3 );

@adamslowe Thanks for that. aria-current attribute now working nicely. Not having as much success with the active menu item styling but it will be a stupid error on my part. I don’t doubt that your suggestion works.

6

@adamslowe Solved:

.current-menu-item a {
color: red;
}

1 Like