Don't show menu element wen empty and no link

Created on 29 October 2024, about 2 months ago

Problem/Motivation

Currently, if you have a menu item without a link and without threads or you don't have the right to see them, you will only have a non-clickable title, it's better not displaying it

Proposed resolution

Add the condition item.url.routeName != '' when menu item is empty (no children)

In the file ui_suite_dsfr/templates/patterns/nav_menu/pattern-nav-menu.html.twig
replace line 29 "{% else %}" with "{% elseif item.url.routeName != '' %}"

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @njaber
  • 🇫🇷France pdureau Paris

    Hi njaber,

    In the file ui_suite_dsfr/templates/patterns/nav_menu/pattern-nav-menu.html.twig
    replace line 29 "{% else %}" with "{% elseif item.url.routeName != '' %}"

    Route manipulation and checking must happen outside the component template. It is application logic, not UI logic.

    Is it a logic other DSFR components and other design systems can also benefit?

    If yes, it may belong to:

    If no, it may belong a preprocess for main menu, or some changes in menu--main.html.twig presenter template.

    What do you think?

  • 🇫🇷France goz

    Hi @pdureau, i'm working with njaber, on this issue (and i'm the one who ask to open issue).

    So let me give more details.

    In the case we have a menu with some first-level elements which give access to sub-menu elements and we do not have permissions to see those sub-items, elements have no children. In this case, there is no reason to have a item to display.

    In any cases, if item is a , it should not be displayed as a link.

    In this case, route manipulation and checking are done by Drupal core mechanisms, but this give us a UI result with a which should be used to display other links, except there is no more links to display and finally display the as a link.

    Here is an example of suggested fix :

              {% if item.below %}
                {% set item_id = 'menu-' ~ loop.index ~ '-' ~ random() %}
                <button class="fr-nav__btn"
                        aria-expanded="false"
                        aria-controls="{{ item_id }}"{% if item.in_active_trail %} aria-current="true"{% endif %}>
                  {{ item.title }}
                </button>
                  <div class="fr-collapse fr-menu" id="{{ item_id }}">
                    {{ _self.menu_links(item.below, attributes, menu_level + 1) }}
                  </div>
              {% elseif item.url.routeName != '<nolink>' %}
                  <a class="fr-nav__link"
    
  • 🇫🇷France just_like_good_vibes PARIS

    Hi guys,
    let's tackle this in 1.1.x branch.

    the UI component should not be aware of backend stuff (i.e. ),
    such a treatment, may be added before the menu and its items are sent to rendering.

    question :
    - do we implement such logic in the ui_suite_dsfr theme?
    - do we implement this logic in a companion module (like for example UI suite dsfr FT )

    let's discuss this, for example in the weekly meetings?

  • 🇫🇷France just_like_good_vibes PARIS

    ok, discussed within the weekly.

    if we implement the logic in a hook inside ui_suite_dsfr, it will work.
    BUT, we won't cover the case of links from menus, extracted with the ui patterns ' source for menus...

    and, by the way, in ui patterns2, when an element has route 'nolink', its url is removed. this opens the way for
    ui component themer to do the check we wanted to do and cover the case.
    Said differently, we can test if the item has no url property inside the TWIG file, instead of testing a url.

    ok, let's make this for 1.1.0

  • I have applied the changes please review.

Production build 0.71.5 2024