Thanks for your feature Request. As far as i know you can do this by using Bootstrap. Also its a difficult Decision which Switch should be added to Core and on the other Hand don't have to much Options.

@franz: I understand, it is done with bootstrap. But it is not as easy as it looks like in the first place. And too bad, compared to other cms packages, like wordpress, for example. Joomla has almost no support through free templates.

Before everyone starts complaining I am talking about free templates, which are just examples for simple customizable Joomla only templates. I am not talking about templates which use its own frameworks inside of Joomla, like helix, EF4, T3 or gantry.

So, what Joomla needs to get beginners (like me) started is either support trough free Joomla only templates or a base template, which is easy to customise to get started with working with Joomla.

Proper documentation would also help!

i do understand your Comment as i'm also no Developer and Switches would be the easiest Way for me.

To be honest: i also understand Volunteers here saying "Documentation is a wiki, please help by writing yourself" as Example.

especially there are so many fields and switches, which are completely useless, if one is not that deep into it. (For the others it is so easy to add a field to the template)

Writing documentation is a good idea, after one is into it. But right now one needs to understand what the hole thing does, in this stage there is no chance to document anything. From my programming experience, documentation is part of the feature and interface definition, which is done BEFORE starting to program.

It's not as simple as a toggle for horizontal or vertical menus. The various module positions aren't really designed to support all potentials (the nav area at the top isn't designed for a vertical menu, a sidebar isn't designed for a horizontal menu, etc.). It's also impossible for us at a core level to say "mod_menu is assigned to position X, automatically include Y classes", these are the types of things that belong at the presentation layer (module layouts, template files, etc.), especially as a template may use any CSS framework available (be it an off-the-shelf solution like Bootstrap or Semantic UI or Materialize, or a homegrown solution as some vendors have created). And while there might be some general helper classes that seem to apply consistently across frameworks, there is no such consistency when it comes to navigational elements.

Looks like similar Discussion in Frontend Nirvana. But in Core-Template Positions,... are known so Cassiopeia as Frontend-Template can do this. @RichardZimmerEschborn But this is also a Discussion by UX-Team so in general we end as often with: What is Joomla for? Dev., experienced Users, all of them, ...

@franz: Of cause, it is always the discussion what kind of user. But important, there is alot more potential of part time administrators than is of full professional developers. And everyone has to start somewhen and somehow. Joomla like it is right now looks more like an closed system, which is maintained by a tiny group for them selfs, which is afraid that anyone takes away an advantage. It is less an open solution. And never forget, someone starting with little knowledge may evolve to be really good later.

@mbabker: I agree, that it is not for implementation in core. I think it should be in the template. As I wrote at the beginning, casseiopaia is sometime horizontal, sometime vertical and it seems to work. If design is not great in vertical (especially for big menues) this can be managed, maybe only a small menue is needed. The template will be adjusted anyway. The problem, starters do not know how to handle the menue at all and the default template is the best way to dig in to find out, how things are done. As I already wrote, the free templates on the market are completely useless to reverse engineer, to understand how Joomla works. And in lack of usefull documentation, reverse engineering is the only way to get to understand Joomla. Especially for someone NOT having $ 1,000.-- per year to buy addons, just to get freeware usable.

@RichardZimmerEschborn all true and often discussed. Discussion ends at the Point that only this happens what a Volunteer do. All start like you and me:-)

Thanks to @franz first advice and using the firefox developer tools F12 I found that there is only one class called flex-column added to the main menu ul tag. This class seems to convert the menu to vertical instead of horizontal, if it exists.

BUT, I cannot find, where the template generates this additional flex-column class. A find -type f -exec grep -l flex-column {} ; in the templates/cassiopeia directory also only lists the .css and .scss files, where flex-column is formatted, but no file where it is put in the html.

@C-Lodder you know more, can you please advice?

Well, it seems to me, that flex-column is hard coded in modules/mod_menu/tmpl/default.php line 21. As I understand, that is one of the core files. This the contrary of what @mbabker wrote.

So my idea:
Add something like:

<field
   name="menuOrientation"
   type="radio"
   class="flex-column"
   default="0"
   label="TPL_CASSIOPEIA_MENU_ORIENTATION"
   >
   <option value="1">TPL_CASSIOPEIA_MENU_VERTICAL</option>
   <option value="0">TPL_CASSIOPEIA_HORIZONTAL</option>
</field>

to template/cassiopeia/templateDetails.xml

Than add something like get('menuOrientation'); ?> to either modules/mod_menu/tmpl/default.php or to the index.php file of the template should do it.

I think it would be simple to add it to mod_menu even if my syntax seems not to be correct, but I am shure you get what I mean.

BUT you also get how difficult it is for a newcomer to do something simple like rotating a menu and how much understanding would be improved by such a simple addition.

Thanks all of you!

Sorry, it seems that formatting is messed up a little in my last comment.

Are you referring to the main menu at the top of the page? If so, I'm not sure how this can be vertical.

Well, it seems to me, that flex-column is hard coded in modules/mod_menu/tmpl/default.php line 21. As I understand, that is one of the core files. This the contrary of what @mbabker wrote.

The core layouts are written in a way where some stuff is hardcoded in, they aren't just blissfully ignorant of any CSS framework (as much as some people groan about this). What I'm saying can't be done (or rather shouldn't be attempted) is you can't just arbitrarily magically change the class just because you assign the module to a specific position on the page, and that not every position on the page is going to sanely support both orientations.

Also, I have no idea where you're finding this flex-column class in use; neither menu module has it looking at the current code in the repo.

Thanks, for formatting, so my last comment is readable!

@mbabker: I think, I installed alpha 2 of 4.0, badly in the top of the admin screen it says Joomla! 4.0.0-dev, so it does not tell exactly which release it is. If anyone is curious, I attach the whole file. (too bad, it does not allow to upload .php file)

The lines 19-21 of modules/mod_menu/tmpl/default.php look like the following:

// The menu class is deprecated. Use nav instead
?>
<ul<?php echo $id; ?> class="nav flex-column <?php echo $class_sfx; ?>">
<?php foreach ($list as $i => &$item)

If, instead of the word flex-column the field from the template is output there, everything would be fine.

@C-Lodder: Yes I am referring to the main menu, at the top of the page. If there is only a few entries in there, it works vertical. And, that is the way I downloaded it. I am just trying to make it horizontal, because vertical takes too little entries.

Yeah, that's definitely outdated. #20702 actually took the Bootstrap flex-column class out of that particular <ul> element, https://github.com/joomla/joomla-cms/blob/4.0-dev/modules/mod_menu/tmpl/default.php is the current state of that particular layout file.

It should always be horizontal.

The design doesn't really cater for a vertical menu. You can simply utilise some of the flex classes provided by bootstrap to achieve this.

I understand. My suggestion, like all the other fields in the template, which are very often not used, implement a field in the template, which selects if the main menue is output horizontal (the default, which makes most sense) or vertical, in case someone wants it to.

It seems to me, that it is very little effort to implement something like this and it would help quite some people. For example also if someone wants to move the main menu to the side bar.

Thanks.

Sure, it's a low effort thing. That still implies though that whatever module position you're putting your menu in supports both horizontal and vertical orientations. Very rarely is that actually the case, so even putting such a parameter in place honestly doesn't help much. Plus, that means the horizontal/vertical toggle has to be something that can be done at the template level (either in the template file itself or with module chrome, and that latter one gets more complex if you're using a chrome that gets reused for different module types) since you can't effectively require template parameters outside the template's files (so you couldn't put a param in the default template and reference it in the default mod_menu layouts, how sure are you that every template out there is creating such a parameter and respecting it?).

To me this is one of those cases where you can't reliably implement such a thing, no matter how simple or well intended it is. IMO it really should be "if you put your menu module in this position, this is what the layout will be; if you put it here, this is what the layout will be", we really shouldn't be trying to build an admin UI and frontend template that supports a vertical menu in the header or a horizontal menu in the sidebar (which in effect would have to be done to support such a parameter).

I do not think so.

Right there in mod_menu, where I found the flex-column could be something like the following meta-code:

if( exists templateField(menuOrientation) {
   if( not empty templateField(menuOrientation) {
      echo templateField(menuOrientation)
   }
}

This way, the template designer could decide, if he supports flipping the menue. He could decide, which class to use for flipping. Even, if an additional class is added for flipping horizontal or if one is added for flipping vertical or both, that for either horizontal and vertical different classes are added.

The css designer then could use those values to format the menue in one direction or the other.

The administrator could decide, in what position to place the menu and if it fits there better horizontal or vertical.

Last but not least we had a true separation of the core coding, the template layout, the css design and the administration.

What else could one whish?

Doesn't quite work that way.

You can't tie a module to template parameters because templates do not consistently offer the same parameters (or even if they do under the same naming). So you can't rely on $app->getTemplate(true)->params->get('menuOrientation') to work with every template. Likewise, it's pretty much impossible for templates to extend the module form on their own (you have to have plugins, a lot of templates are done by folks who don't have a strong grasp of PHP so trying to explain to them how to write a plugin to hook certain events to manipulate a form isn't going to be very easy at all). So it has to be contained within the template's files.

Sure, in the template's index.php file, you can do a $this->params->get('menuOrientation') check. How does the template know what position you've got a mod_menu module published in? That's not going to work efficiently.

Then there's the template's module chrome. This can work to an extent, the functions get passed the module object and the module instance's params. But not the template params. That means $app->getTemplate(true)->params->get('menuOrientation') is off the table for any of the default system chrome because those come from the system template that has no configuration. So it only reliably works in a chrome implemented by that template.

This is not a matter of "how much code does it take to support the feature". It's really not a lot. When you factor in every other thing that needs to be taken into consideration, it's honestly a big ask for such a small thing and personally I don't think the maintenance burden is worth it.

Well, I give up!

Still Joomla is alot more complicated than wordpress, for example. There needs something to be done, that beginners get better into it. I myself already spend month, trying to understand. There need to be documentation, that, what is available is the worst of any programming environment I have ever seen. There need to be multiple free and usable easy Templates, which beginners can use as a starting point. Templates with different Layouts and aproches, like for example bootstrap supply it. Maybe a library like https://getbootstrap.com/docs/4.1/examples/ converted to Joomla would be a good starting point. Because, like I already said, the so called free Templates which all the big Template provider companies advertize are completely unusable for Jommla (they use the librarys like helix, ... instead of using Joomla.

Thanks to all for the discussion,
Richard

I'm not disagreeing the current state isn't the most user friendly. But even small things like this create a lot of overhead in the core default template, then the expectation of the template providers picking up on and using these same options. That's where things get tricky.

Joomla's complexity comes from the fact that we put options in the backend UI to control so much of the frontend interface that you're just bombarded with options for everything. WordPress has a lot of separation between the theming layer and where you're managing your content structures (posts/pages, menus, widgets, etc.) and doesn't actually expose a ton of options in the UI the same way we do (so much of WordPress' presentation logic is really down to how the template does it). So it may not be that it's necessarily easier in WordPress, but it's better documented and they don't present you with a highly complex backend manager (in other words, WordPress kind of expects you to get your hands dirty with HTML and CSS management, Joomla tries to keep the user from having to touch that, and the results of those focuses are pretty obvious).

I am certain, if one wants to build a webpage, he MUST get into html and css. Very many things are sooo simple, if you do it there. What Joomla is doing, it makes things so complicated, that almost nobody can handle it. I think the MVC design is very good, but give the view designers the chance to design the view and do not try to design the view out of the core!

It looks like this discussion has reached a natural conclusion.