Problem/Motivation

The main menu gets rendered as a "ui_suite_daisyui:menu" component, through menu--main.html.twig.
However, do to the logic in there, the menu item <a> elements do not automatically get the "is-active" class assigned to them, which does happen in Drupal core themes (probably through the "drupal.active-link" library).

It would make sense to have the active menu item be visually styled the same as when a menu item is hovered...

Steps to reproduce

- Add main menu block to a DaisyUI-powered theme
- Navigate to a page within the main menu
- Inspect the active menu item - it has no specific class to indicate it is the active item, nor any different visual style applied to it.

Proposed resolution

- Make sure the Drupal core "is-active" class gets correctly added to the active menu item
- Preferably, apply a different visual style to menu link items that have class "is-active".

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

svendecabooter created an issue. See original summary.

svendecabooter’s picture

Issue summary: View changes
g4mbini’s picture

g4mbini’s picture

Status: Active » Postponed (maintainer needs more info)
svendecabooter’s picture

Status: Postponed (maintainer needs more info) » Needs work

I applied the MR logic from #3508748: Add ability to track active menu items in menu source.
Then in ui_suite_daisyui:menu component, I add a check:

{% if item.in_active_trail %}
      <!-- Try adding extra class here -->
{% endif %}

That doesn't seem to work... Maybe I'm missing some additional context

svendecabooter’s picture

I fixed this by applying the patch in #3508748: Add ability to track active menu items in menu source and adding the following to the ui_suite_daisyui:menu component:

(...)
  {% for item in items %}
  <li{{ (not item.url and loop.first) ? ' class="menu-title"' : '' }}>
    {% set item_attributes = item.attributes|default(create_attribute()) %}
    {# Start adding class for menu active trail #}
    {% if item.in_active_trail %}
      {% set item_attributes = item_attributes.addClass('menu-active') %}
    {% endif %}
    {# End adding class for menu active trail #}
    {% if item.url %}
(...)

Not sure if this logic can already be incorporated into ui_suite_daisyui, while waiting on its commit in ui_patterns.
It would be good to have this already in place by the time ui_patterns gets updated, but not sure what the policy is there...

g4mbini’s picture

@svendecabooter thank you for your tests on these two related issues.

I would prefer to wait for UI Patterns upstream issue being fixed and move forward here.

g4mbini’s picture

Status: Needs work » Postponed
g4mbini’s picture

Title: [5.0.0-alpha3] Menu items do not get is-active class » [5.0.0-alpha4] Menu items do not get is-active class
g4mbini’s picture

Title: [5.0.0-alpha4] Menu items do not get is-active class » [5.0.0-beta2] Menu items do not get is-active class

mortona2k made their first commit to this issue’s fork.

mortona2k’s picture

Status: Postponed » Needs review

Worked on the UI Patterns issue, and added the class as recommended in #6.

Failing test is due to ui_skins_theme in ui_suite_daisyui.settings.yml.

Maybe it should be ui_skins.theme?

I think that's added here: https://git.drupalcode.org/project/ui_skins/-/blob/1.x/src/Hook/FormSyst...

mortona2k’s picture

Nope, that didn't fix it. I'm not sure how the pipeline succeeded on the main branch.

just_like_good_vibes made their first commit to this issue’s fork.

just_like_good_vibes’s picture

Status: Needs review » Reviewed & tested by the community

Thanks @mortona2k, and @svendecabooter.
I rebased the MR on 5.0.x (please note that CI is fixed on 5.0.x now).

in_active_trail is part of the UI Patterns links schema since 2.0.20, so the theme now requires that version.

A parent with sub-items is shown as a collapsible summary, which our current daisyUI build does not highlight yet; it will once we rebuild with daisyUI 5.7.

just_like_good_vibes’s picture

Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.