Class active-trail not added to li element when linking to front page

Created on 15 May 2012, over 12 years ago
Updated 20 November 2024, about 17 hours ago

D8 explanation:

I've installed bootstrap 8.x-3.x on a multilanguage site, but in the default main menu the home link is never active, when I'm in the home page the claass="is-active" won't appear.
This doesn't just occur with bootstrap though, it's a core issue.
See screenshots:

Active class missing (illustration)

Active After Applying Active Class

D7 explanation:

There is a bug with the "active-trail" class not showing up on <li> for menu items with Drupal 7.14. The problem is that "active-trail" is missing for a menu link to the front page (path "<front>"), all other links have "active-trail" just fine.

The situation is also slightly different for the horizontal primary link tabs that can be switched on from theme settings Toggle display - Main menu, than they are for the vertical navigation in the Main menu block. In the horizontal tabs the front page <li> has "active" but not "active-trail". So "active" could be used to do get around this issue for horizontal menus. But unfortunately if you want the vertical menu, there is no "active" nor "active-trail".

I verified that both "active" and "active-trail" are missing with a fresh install without any added modules on Drupal 7.4 to 7.14. The behaviour is identical with Bartik, Garland and Stark themes, as well as Zen.

Steps to reproduce:

1. Create a fresh install of Drupal 7.14.
2. On the front page go to Structure -> Blocks.
3. Move "Main menu" block to "First sidebar"
4. Create a new "Basic page" with test content and click "Provide a menu link" -> "Parent item" [Main menu]
5. Use e.g. Firebug to verify that the newly created test page link on the sidebar has "active-trail" on <li> but "Home" does not.

Attached is a patch that fixes the bug by adding special handling for the front page when adding the active-trail class. A better solution would be to get the 'in_active_trail' variable correctly set for links to <front>, but unfortunately I could not find out how to do that.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component

menu system

Created by

🇫🇮Finland ttiurani

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States dcam

    The following workaround code was adapted from #64. It corrects the problem of flagging all routes of the same name by also comparing the route parameters.

    /**
     * Prepares variables for block__system_menu_block templates.
     *
     * Work around an issue where front page menu links are not set in the
     * active trail.
     *
     * Default template: block.html.twig.
     *
     * @see https://www.drupal.org/project/drupal/issues/1578832
     */
    function my_theme_preprocess_block__system_menu_block(&$variables) {
      if (!\Drupal::service('path.matcher')->isFrontPage()) {
        return;
      }
    
      $homepage_path = \Drupal::config('system.site')->get('page.front');
      $homepage_url = \Drupal::service('path.validator')->getUrlIfValid($homepage_path);
      if (!$homepage_url instanceof Url) {
        return;
      }
    
      foreach ($variables['content']['#items'] as $key => $item) {
        /** @var \Drupal\Core\Url $url */
        $url = $item['url'];
        if (!($url instanceof Url) || !$url->isRouted()) {
          continue;
        }
    
        $is_front = $url->getRouteName() == '<front>';
        $is_configured_route = $url->getRouteName() == $homepage_url->getRouteName() &&
          $url->getRouteParameters() == $homepage_url->getRouteParameters();
        if ($is_front || $is_configured_route) {
          $variables['content']['#items'][$key]['in_active_trail'] = TRUE;
        }
      }
    }
    
Production build 0.71.5 2024