[Feature request] Site sub-menu capability

[hightowe]

I am a new WonderCMS user and I like it very much, so far. It is exactly the type of CMS that I was looking for to build the website of my new, fledgling startup business (https://adivvyo.com/). I adapted the Paper-L theme for my purpose, and I really like the result.

Looking ahead, the first thing that I can foresee that would force me to change CMSes is the lack of sub-menuing for sites. It seems to me that providing the ability to have sub-menus would really expand the user base that could stick with WonderCMS.

Today, my menu is very simple, but over time it will expand... In web-browsers, I'd like the ability to have the site menu do this, where the Products menu opens when clicked to allow access to the Product A/B/C pages:

     [ Home ] [ Products ] [ Services ] [ Contact ]
                \_
                 [ Product A ]
                 [ Product C ]
                 [ Product C ]

In mobile, it would be fine for the "Product A/B/C" items to just be a slightly smaller or altered font, in a vertical list like this"

[ Home ]
[ Products ]
  [ Product A ]
  [ Product C ]
  [ Product C ]
[ Services ]
[ Contact ]

Honestly, most sites would likely not need more than one level of sub-menus, but providing just one level would really expand the base of users that could stick with WonderCMS.

Thanks to you guys for a nice CMS!

[hightowe]

Adding a link to a working bootstrap example of what I have in mind: https://www.bootply.com/123179

I'm also new to bootstrap, BTW, or I maybe would have dived into trying to implement this myself. I also wanted to first get a sense for how the wCMS community felt about this idea...

[robiso]

@hightowe I like the idea, but I think some heavy lifting would be required for WonderCMS to support sub-pages (due to the way WonderCMS is built).

Thanks for the awesome approach, I try to nudge some bright devs for some brainstorming.

[StephanStanisic]

Maybe we could stop replacing the '/' character in the slug of pages, and then render the menu with submenu's but keep the admin the same.

For example, this list of slug => pagename:

{
    "home": "Home",
    "example": "Example dropdown",
    "example/item1": "Item 1 of dropdown",
    "example/item2": "Item 2 of dropdown"
}

In the pages tab on the admin side this will still show as "example/item1", but when editing pages I think that most users will resort to using the menu.

This could probably be best done in a plugin, because when you want a title "features/requests" I can see this system breaking.

[hightowe]

Nice idea, @StephanStanisic ... I like it.

Your point about titles with a slash is well taken. Users that used such a plugin could likely instead encode their desired slashes as html entity 47 (/). Alternatively, we could consider a different submenu designate that is less likely to be problematic; perhaps double colons (::) or double pipes (||).

{
    "home": "Home",
    "example": "Example dropdown",
    "example::item1": "Item 1 of dropdown",  // double colons
    "example||item2": "Item 2 of dropdown",  // double pipes
}

I stumbled across this site this morning, and liked their menu system implementation. It is exactly the type of thing that I have in mind... https://www.aegistp.com/

[StephanStanisic]

Your suggestion for different characters will only offset the problem, while I don't think there is a big chance of anyone using :: or || in the menu item.

Also, the URL would look funny this way:

https://example.com/example/item1
https://example.com/example::item1
https://example.com/example||item1

@robiso how is the slug of an URL generated? And will something like / end up in these slugs naturally?

As for the implementation of the dropdown, I think the best solution is to use the bootstrap one you suggested earlier. The menu is already using bootstrap's menu and it is a widely used library.
Styling is something that is the responsibility of the theme, not the plugin in my opinion.

[hightowe]

Good points, @StephanStanisic...

One other detail question: referring back to your example above, do you envision "example" to be a page that would render at URL https://example.com/example ...? I do, but was curious of your thoughts.

[StephanStanisic]

I would think that a sub menu would contain a root, a lot of websites do. I think that bootstrap's menu also contains a root a element.

So yes, but maybe a way to turn that off? Because most times they are used poorly and you just end up accidentally clicking them.

[robiso]

@StephanStanisic, currently the main slug function replaces everything that is not a character into "-" a minus.

I'll talk to @slavenstancic to see if there's anything useful we can make out of this and build it into the next version.

[robiso]

@hightowe, @StephanStanisic happy to nofity you that submenus are in the works, waiting in pull request.

We're still polishing out some bugs and after it's also thoroughly tested, another pull request will be made by Slaven.
To infinite subpages and submenus and WonderCMS 3.2.0 🍻

[hightowe]

Very cool, @robiso - thanks.

[compie67]

is there any update for this, or something to test?

[robiso]

Hi @compie67, we're still working on resolving some bugs for the next release.

Bugs include:

• renaming parent pages and subpages results in deleting subpages + content
• theme issues with infinite subpages displaying
• adding subpage class only to parent pages that actually have subpages (for easier creation of themes that support subpages)

If you wish, you can give it a go from the 320 branch of this repository: https://github.com/robiso/wondercms/tree/320
Please don't use it for production yet, as it's not fully stable

[robiso]

@compie67 @hightowe this is now live with WonderCMS 3.2.0.

The only theme that currently correctly displays subpages is the new Sky theme, however you can implement this with CSS in any theme.

Closing issue after 2 years, this is thrilling. :)