Problem/Motivation

When adding a new menu entry, menu item form help explains how <button> and <nolink> can be used to add a button or a text without link in any menu, however, radix interprets a non renderable item.url (such as <nolink> or <button>) as <hr> :

https://git.drupalcode.org/project/radix/-/blob/6.0.x/components/dropdow...

Steps to reproduce

Add menu item and do this considering the menu form help:

Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as https://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.

Proposed resolution

What about if dropdown component adds another condition to convert it to hr and so on <nolink> and <button> is allowed?

If this is done it will be easier to set menu items as headers https://getbootstrap.com/docs/5.0/components/dropdowns/#headers e.g.

Issue fork radix-3518216

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

aleix created an issue. See original summary.

aleix’s picture

aleix’s picture

Status: Active » Needs review
StatusFileSize
new478 bytes

with this patch if item title is '-' and url is it will be converted to hr

aleix’s picture

(patch will not apply, must be placed in /components/dropdown-menu/ ... sorry)

aleix’s picture

StatusFileSize
new570 bytes

Uploading working patch

doxigo’s picture

Thanks a lot Aleix for the patch and the issue.
I am yet to test this but I wonder if this is a proper solution for nolink and button, they will probably fall into the else section.

the - for the divider works I suspect but not sure

That aside, if they are meant to be a dropdown, does it need a dropdown-header class maybe?

aleix’s picture

Issue summary: View changes

(upgraded issue description to show tags, without this is impossible to understand what I was saying... 🙏🏻)

aleix’s picture

That aside, if they are meant to be a dropdown, does it need a dropdown-header class maybe?

Sure, menu items to be headers must be preprocessed or in ui with https://www.drupal.org/project/menu_link_attributes to add dropdown-header

aleix’s picture

I think that there's no problem in falling to the else as link supports bothnolink and button urls so the only special cases are <nolink> with title == -, and now button as I have updated the MR, covering the way how button can be rendered using our component.
To be fully usable, the button in the menu needs to be treated in css too.

doxigo’s picture

I see, thanks Aleix, could you also do me a favor and update the README file of the component as well if needed in the MR?

aleix’s picture

Yes, so ¿ Do you mean adding there the notes about the use of <nolink> together with "-" and <button> ?

doxigo’s picture

Yes that, so I can merge and call it a day :D

aleix’s picture

Done, maybe someday the button logic can be extended to be more accessible from dropdown component properties, maybe when someone needs it can be changed. Thank's doxigo

  • doxigo committed a724a5c1 on 6.0.x authored by aleix
    Issue #3518216 by aleix, doxigo: Allow using <nolink> and <button> in...
doxigo’s picture

Status: Needs review » Fixed

Yeah sounds good, we should look into that at some point, Thanks a lot for the MR 🙌

Status: Fixed » Closed (fixed)

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