Special Menu items are rendered as empty links in navigation

Created on 17 May 2024, 7 months ago
Updated 13 September 2024, 3 months ago

Problem/Motivation

When adding a Menu Item, it is possible to add special items like <nolink> or <button>

According to Menu Link form:
Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.

Current navigation twig template structure does not respect these items and render them as links whose href is empty, having a different behavior than the expected one.

Attaching screenshots of the same menu as part of navigation or as a block to show the differences:

Steps to reproduce

  • Install a Drupal site and enable navigation
  • Edit any of the menus included in the navigation bar
  • Add menu links whose Link field value is <nolink> or <button>
  • Confirm that those items are shown as empty links instead of the expected HTML markup

Proposed resolution

Update navigation twig templates to respect the special menu items behavior.
Checked how menu.html.twig works and it seems this piece of code generates the expected markup:

{{
  link(
    item.title,
    item.url,
    item.attributes.removeClass(item_classes).addClass(link_classes)
  )
}}

Could be worth to explore how it works and try to reuse or replicate its behavior.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Fixed

Version

10.3

Component
Navigation 

Last updated about 20 hours ago

No maintainer
Created by

🇪🇸Spain plopesc Valladolid

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

Merge Requests

Comments & Activities

  • Issue created by @plopesc
  • 🇪🇸Spain plopesc Valladolid
  • Assigned to kostyashupenko
  • 🇷🇺Russia kostyashupenko Omsk

    In progress

  • Pipeline finished with Canceled
    7 months ago
    Total: 64s
    #175659
  • Issue was unassigned.
  • Status changed to Needs review 7 months ago
  • 🇷🇺Russia kostyashupenko Omsk

    Good catch.

    It's now ready for review.
    made also span element not interactable visually (no hover styles). Also added few fixes for forced-colors: active mode

  • Pipeline finished with Failed
    7 months ago
    Total: 871s
    #175660
  • Status changed to Needs work 7 months ago
  • 🇺🇸United States smustgrave

    Can we had a test case to cover this scenario please

  • Pipeline finished with Canceled
    7 months ago
    Total: 20s
    #179996
  • Pipeline finished with Success
    7 months ago
    Total: 507s
    #179997
  • Status changed to Needs review 7 months ago
  • 🇪🇸Spain plopesc Valladolid

    Tests added for this new scenario.

  • 🇮🇳India Kanchan Bhogade

    Hi
    I've tested MR !8117 on Drupal 11
    The MR is applied cleanly...

    Special Menu items' empty links in the navigation issue is fixed.

    RTBC+1

    Adding SS

  • 🇨🇦Canada m4olivei Grimsby, ON
  • 🇨🇦Canada m4olivei Grimsby, ON
  • Status changed to RTBC 7 months ago
  • 🇺🇸United States smustgrave

    Thanks @plopesc for the quick tests

    There was 1 failure:
    1) Drupal\Tests\navigation\Kernel\NavigationMenuBlockTest::testHtmlMarkup
    //li[contains(@class,'toolbar-block__list-item')]/span/span[text()='title 1']
    Failed asserting that 0 matches expected 1.
    /builds/issue/drupal-3447837/core/modules/navigation/tests/src/Kernel/NavigationMenuBlockTest.php:351
    FAILURES!
    Tests: 3, Assertions: 35, Failures: 1.<code>

    Coverage appears to be there.
    Manual testing I get the same as the issue summary.
    Code change appears fine

  • 🇨🇦Canada m4olivei Grimsby, ON

    +1 RTBC. I tested locally and it works as you might expect:

  • Status changed to Needs work 7 months ago
  • 🇷🇸Serbia finnsky

    I would like to fix some css and twig here.

  • Pipeline finished with Success
    7 months ago
    Total: 543s
    #191577
  • Pipeline finished with Failed
    6 months ago
    Total: 269s
    #199411
  • Status changed to Needs review 6 months ago
  • 🇨🇦Canada m4olivei Grimsby, ON

    I took a crack at breaking the standstill on the one issue. Lets see what we all think.

  • Status changed to Needs work 6 months ago
  • The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • 🇷🇸Serbia finnsky

    @m4olivei

    I love that idea. existing twig function isn't really flexible.

  • Pipeline finished with Failed
    6 months ago
    Total: 251s
    #200219
  • Pipeline finished with Failed
    6 months ago
    Total: 192s
    #200220
  • Pipeline finished with Canceled
    6 months ago
    Total: 37s
    #200233
  • Pipeline finished with Failed
    6 months ago
    Total: 217s
    #200234
  • Pipeline finished with Failed
    6 months ago
    Total: 649s
    #200241
  • Pipeline finished with Success
    6 months ago
    Total: 647s
    #200252
  • Status changed to Needs review 6 months ago
  • 🇷🇸Serbia finnsky

    I think it may need change record since we add new function in Drupal Twig here.

  • Pipeline finished with Failed
    6 months ago
    Total: 602s
    #200716
  • Status changed to Needs work 6 months ago
  • 🇪🇸Spain plopesc Valladolid

    Thank you for pushing this one!

    Checked code and found out that new approach is not respecting menu link attributes. Added extra tests to confirm it and avoid overlooking this again.

    I don't know if the new approach clears up all the doubts about the use of stateless functions and how to handle the use of menu links in SDC expressed in the original version.

    That is a bigger concern that not only affects to navigation, but also to how to render menus in SDC. A follow up issue to address this in a global and consolidated way could be worth here.

  • Pipeline finished with Failed
    6 months ago
    Total: 543s
    #214223
  • Pipeline finished with Failed
    6 months ago
    Total: 512s
    #214250
  • Pipeline finished with Failed
    6 months ago
    Total: 513s
    #214267
  • Pipeline finished with Success
    6 months ago
    Total: 475s
    #214955
  • Status changed to Needs review 6 months ago
  • 🇨🇦Canada m4olivei Grimsby, ON

    I think we're all set on all threads. Tests now passing and ready for a re-review.

  • Pipeline finished with Success
    6 months ago
    Total: 536s
    #220363
  • Status changed to RTBC 5 months ago
  • 🇪🇸Spain plopesc Valladolid

    Marking as RTBC, we need now the framework manager review for the new Twig function.

    Thank you!

  • Status changed to Needs review 4 months ago
  • 🇫🇷France nod_ Lille

    Is this made obsolete by 📌 Migrate Toolbar button to SDC Needs review ? In the other MR an item without URL is taken into account.

    I'd rather not add another Drupal specific twig function.

  • Status changed to RTBC 4 months ago
  • 🇺🇸United States smustgrave

    Per the response in 📌 Migrate Toolbar button to SDC Needs review these appear to be separate.

  • Assigned to m4olivei
  • Status changed to Needs work 4 months ago
  • 🇨🇦Canada m4olivei Grimsby, ON
  • Pipeline finished with Success
    4 months ago
    Total: 828s
    #276028
  • Status changed to Needs review 4 months ago
  • 🇨🇦Canada m4olivei Grimsby, ON

    I found a regression with the use of the new link_tag Twig function in Olivero. That obviously weakens the case for it, as navigation would be the single use of it. Added to the hesitation for adding another Twig function, I've removed it and instead taken inspriation from Olivero's template, using the same conditional for our purposes of deriving the HTML tag name from the URL object.

    Should be all set now. Hopefully will be easier to get through without the introduction of the Twig function.

  • 🇨🇦Canada m4olivei Grimsby, ON

    Also note, if we have agreement, @finnsky we can delete the change record.

  • Issue was unassigned.
  • 🇨🇦Canada m4olivei Grimsby, ON
  • Status changed to RTBC 3 months ago
  • 🇪🇸Spain plopesc Valladolid

    Code looks good to me!

    Once we are not adding the new twig function, I believe the frontend framework manager review is not needed anymore.

  • Status changed to Needs work 3 months ago
  • 🇬🇧United Kingdom alexpott 🇪🇺🌍

    I've added a comment on the MR. I think we need to adjust things because we're in a loop and it is possible item_link_tag will have a value from a previous iteration of the loop. Also we can use the constants to keep things consistent.

  • Pipeline finished with Failed
    3 months ago
    Total: 459s
    #281915
  • Pipeline finished with Success
    3 months ago
    Total: 754s
    #281944
  • Status changed to RTBC 3 months ago
  • 🇪🇸Spain plopesc Valladolid

    Code suggestions applied, MR branch synced with 11.x and tests are green.

    I think this one can be marked as RTBC.

  • 🇬🇧United Kingdom alexpott 🇪🇺🌍

    Committed and pushed 1c67d3b559 to 11.x and 2305dacae3 to 11.0.x and a5a8967cd4 to 10.4.x and 5f44b4b454 to 10.3.x. Thanks!

    Backported to 10.3.x as navigation is an experimental module.

  • Status changed to Fixed 3 months ago
    • alexpott committed 5f44b4b4 on 10.3.x
      Issue #3447837 by finnsky, m4olivei, plopesc, kostyashupenko, kanchan...
    • alexpott committed a5a8967c on 10.4.x
      Issue #3447837 by finnsky, m4olivei, plopesc, kostyashupenko, kanchan...
    • alexpott committed 2305daca on 11.0.x
      Issue #3447837 by finnsky, m4olivei, plopesc, kostyashupenko, kanchan...
    • alexpott committed 1c67d3b5 on 11.x
      Issue #3447837 by finnsky, m4olivei, plopesc, kostyashupenko, kanchan...
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024