[1.1.0] Component nav-menu : Don't show menu element when empty and no link

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:

• https://git.drupalcode.org/project/ui_patterns_settings/-/blob/8.x-2.x/s... for UI Patterns 1.x
• https://git.drupalcode.org/project/ui_patterns/-/blob/2.0.x/src/Plugin/U... for UI Patterns 2.x

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

What do you think?

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"

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?

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.

Hello,
i will take back this issue and publish the fix.

ok, i fixed it.
i also added a phpunit test.

Do we really need is not empty everywhere? If it works without it, let's keep it simple:

{% if item.below or item.url %}