Adding a text only as menu item using menu builder

The CMS Questions
1

Hi Kirby’s friends,

Would you have any idea to allow the user to add a text only (no link) menu item using menu builder?

Capture d’écran 2021-03-24 à 16.57.12
Capture d’écran 2021-03-24 à 16.57.121420×980 172 KB

2

Could you please explain what you are referring to?

3

As you can see on the screenshot of my website menu, the blue underlined items are only titles without any link.
While the red underlined items are links to listed pages.

To allow the user to build such a menu, I will use the menu builder principle.
But by default, all menu items are links.
To do this, I could create empty pages, then in the template, filter them to remove the link.

But this is not very elegant. You might have a better idea.

4

You can use a text field instead of a link field/pages field. Then depending on which field is used, when you output the menu, use an anker tag for the link and just text for the links that should not be links.

5

Why did I missed this solution!
That’s perfect.

So, the blueprint could be something like that:

label: Menu
icon: menu

sections:
  menuBuilder:
    type: fields
    fields:

      menu:
        type: structure
        fields:
          isTitle:
            type: toggle
            label: 
              en: Title item
              fr: Element titre
            default: false
            width: 1/4
          title:
            type: text
            label:
              en: Text only item
              fr: Elément texte
            when:
              isTitle: true
            width: 3/4
          mainMenu:
            type: link
            label:
              en: Menu item
              fr: Elément de menu
            when:
              isTitle: false
            width: 3/4
          hasSubmenu:
            type: toggle
            label:
              en: Submenu 
              fr: Sous-menu
            default: false
            width: 1/4
          subMenu:
            type: structure
            label:
              en: Submenu item 
              fr: Eléments de sous-menu
            when:
              hasSubmenu: true
            fields:
              extends: fields/menulink

Am I in the right way?

6

Exactly!

7

@texnixe you are always the best!