How to add CSS class nav menu (Block Theme)

  • Hi,

    Been using classic themes and customising for a while. Been testing out some block themes (Spectra One, Twenty Twenty Four, etc.). I have created a menu/navigation block and it works fine. Now I have some posts that do not appear on the menu, say news or blog posts or something similar. I still want the Blog menu on the navigation block to be highlighted and the ancestor menu item. On a classic theme I was able to do this (a hook, menu walker, etc.) but understandably a block theme works different. So the question is how do I hook into the navigation block to inject a custom CSS class to the specific menu item I want to be the ancestor?

Viewing 3 replies - 1 through 3 (of 3 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hi @nickbits,
    To inject a custom CSS class to a specific menu item in the navigation block, you can use the?nav_menu_css_class?filter hook,
    Here’s an example of how you can use it:

    function add_custom_css_class_to_menu_item( $classes, $item ) {
    if ( $item->title === 'Blog' ) {
        $classes[] = 'custom-css-class';
    }
    return $classes;
}

add_filter( 'nav_menu_css_class', 'add_custom_css_class_to_menu_item', 10, 2 );

    Hope this helps! ??

    Thread Starter Nick

    (@nickbits)

    @addweb-solution-pvt-ltd Thank you for that. Unfortunately that is for classic themes, not block themes, unless I am missing something.

    For example if I have Astra (classic theme) enabled ‘nav_menu_css_class‘ is fired and works as normal. But if I switch to a block theme, for example I have tried Spectra One and Twenty Twenty Four, the hook doesn’t fire.

    That hook is one of the methods I have used several times before and have already tried (sorry, I should have been more specific on what I had tried).

    Thus I assume there is a different way to do this with block themes.

    • This reply was modified 11 months, 3 weeks ago by Nick.
    Thread Starter Nick

    (@nickbits)

    Taken a lot of reading and experimenting for what seems like a simple solution. This may not be the best way to do it but it works. 

    // We are looking to add a CSS class to a menu link.
function myfunction( $block ) {

  // Skip if not a menu link
  if ( 'core/navigation-link' !== $block['blockName'] )   {
    return $block;
  }

  // Skip if no attributes, no label or the label isn't matching the menu item.
  if (!$block['attrs'] || !$block['attrs']['label'] || $block['attrs']['label'] !== 'replace_with_your_menu_title'){
    return $block;
  }
  // Add a class
  $block['attrs']['className'] = ' add_your_class_here';
  return $block;
}

add_filter( 'render_block_data', 'myfunction');

    So this looks for menu links, checks the label for it matches what you are looking for and then adds in a class. It seems to work, I am still testing it out though. Please if you have a better way to do it, do share.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add CSS class nav menu (Block Theme)’ is closed to new replies.