[4.0] [RFC] Cassiopeia template does not use dropdowns for menus with submenus in module position "menu"

[richard67]

Steps to reproduce the issue

Install 4.0-alpha5-dev.

Login to administrator area (backend).

Install blog sample data.

Change module position of site module "Author Menu" to position "menu".

Go to the site (frontend) and log in.

Log in is needed because "Author Menu" is used, which is the only example in blog sample data which has submenus, but it would be the same without login with any other menu which has submenus.

Expected result

Menu module uses dropdown for menu items with submenus.

Actual result

No dropdowns are used, menu looks really bad, see red mark in following screenshot:

System information (as much as possible)

Doesn't matter, happens with any Joomla 4.0 version.

Additional comments

In general menu styles seem not to be complete in the Cassiopeia template, e.g. "nav-pills" does not work in any module position.

This is a huge functional downgrade compared to the Protostar template of Joomla 3.

@ciar4n Please check and comment.

[ciar4n]

What would be prefered here?...

Some options...

1. Add the Bootstrap dropdown classes to the core menu module
2. Create an override of the core menu module in the template
3. Write non Bootstrap CSS to create a dropdown

[richard67]

Good questions. I have no idea about what is the standard way in Joomla 4, that's why I was not able to make a PR myself.

[richard67]

The more I look into the scss and js, the less I think I have the knowledge to make a PR myself.

@wilsonge As you are the release lead: Do you know which of the options mentioned above by @ciar4n is the most appropriate for 4.0? Or do you know who knows? What is the status of and the plan about the de-bootstrapification of the 4.0 core? Shall Cassiopeia be a bootstrap template or not?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22930.}

[wilsonge]

Shall Cassiopeia be a bootstrap template or not?

Yes it is a bootstrap template

What is the status of and the plan about the de-bootstrapification of the 4.0 core?

There isn't one. We're dropping jQuery as much as we can and obviously if there's no need to use bootstrap don't use it. But if there is a need for bootstrap use it. There's a reason we've upgraded to bootstrap 4, not dropped bootstrap...

Some options...

Add the Bootstrap dropdown classes to the core menu module
Create an override of the core menu module in the template
Write non Bootstrap CSS to create a dropdown

In all our examples our menu is designed to be a vertical dropdown effectively. So actually I'm kinda happy with not editing the core menu module. I'd shove an alternate layout in the template for a bootstrap vertical dropdown people can use if they want (which uses bootstrap)

[richard67]

@wilsonge

In all our examples our menu is designed to be a vertical dropdown effectively.

And why does the preview image of the Cassiopeia template then show a vertical menu at the top, left beside the search box?

It should be possible to at least have dropdowns for a menu at that module position.

That module position is even called "menu", so it was desired to be the place for a kind of main menu of a site, which is also what Bootstrap suggests to have at that place.

The more I look into the Cassiopeia details, the more I think it is an either unfinished or somehow later broken work which has no consistency in the use of Boostrap CSS or own CSS classes.

The standard site template of Joomla should be a show case on how things should be done, so either should be a basic template which does not require Bootstrap at all, but if it is a Bootstrap template like you say, then it should support Bootstrap classes like "nav-pills". But currently it does not support that at all.

On the other hand, our blog sample date still uses the "nav-pills", see my closed PR #23023 .

This all seems not consistent to me and makes me think what I mentioned above: Either unfinished or somehow broken.

[ciar4n]

For a bit of history on this template, here are couple of the more significant styling PRs..

Initial template by @C-Lodder .. #14864
Current header styling .. #18464
Moving to grid... #16810

And that is pretty much it. There has not been much discussion on what is expected of the template and I don't think it was ever considered 'finished'.

[richard67]

@ciar4n I start to understand a bit which way it goes. Much stuff to read, will try to dig into it.

@wilsonge Do I get you right, you think it should be an alternative layout in a template override, so below the html sub-folder of the template? If so, does this desciption for Joomla 3 also apply for Joomla 4?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22930.}

[richard67]

I started to work on it a bit but then focused on other stuff. I will close this issue and if necessary open a new one when I continue on that subject.

[p-heckler]

Hi,
Has there been any evolution on this topic? This issue can still be reproduced in alpha-10 and it seems to be a serious limitation to any practical use of the template. A quick-fix is to use CSS to make it a hoverable dropdown menu, but bootstrap 4 dropdown classes would provide a more organic solution.

[richard67]

No, there has not been a solution for this yet.