We are currently implementing a Nav menu with dropdowns.
We are noticing it is not straightforward to do the following:
Style all current items the same whether in the main menu items or in the dropdown items (e.g. colour, font-weight, etc)
Style current main items and current dropdown items uniquely and distinctly (e.g. colour, font-weight, etc)
This may be a lack of knowledge on our part due to the Nav block being relatively new, one thing we do notice is the current documentation doesn’t seem to contain an itemised list of each style available and exactly what it relates to.
For example “D. Current” is not the most semantically descriptive style name and there has been some confusion over exactly what this actually styles. As most of the Cwicly blocks are so intuitive, this can be potentially be improved.
While we could use custom css and/or relative styles, we would prefer to learn the “correct” way to use the component first.
@Araminta, please can you advise us on the best ways to achieve the above.
This is a good point, and isn’t currently possible through a specific setting (but with Relative Styling). Would appreciate knowing when this would apply.
Hovering over most of the styling items should highlight what it’s affecting. Definitely something we can look into.
Dropdown Current. Good point, will make sure we address this in the Relative Styles top notice.
This didn’t seem to work for us, it could have been overrides from presets when testing preventing it, we will test with a clean instance and see if this works in our case.
Thank you @Louis, we will use relative styles for this until there is a built-in option.
Having a mega menu style dropdown, there are many designs where the style of link in the sub menus is completely different.
That’s interesting. I’m not quite sure I comprehend what “global link styles” relate to in this specific instance.
Having re-read your first post, I see you mention dropdown sub items. The Current Page styles specifically apply to the Nav Links portion of the Nav block.
In my opinion, top nav items and dropdown children current items should not be styled in conjunction (I’m happy to discuss this).
We don’t currently provide a specific rule for styling dropdown current items, but definitely something we could add. Most of users target them using aria-current="page".
To clarify, any link styles defined in Global Styles > Typography > Link do not override the styles for non-dropdown links in the main menu, but they do override dropdown links in the main menu. This case specifically is not referring to sub menu items, only the main menu items, which are either non-dropdowns or dropdowns.
Ideally the specificity of the Nav block items links should override the Global Styles for both non-dropdown and dropdown menu items.
OK, I understand, I think it would be user friendly to add styles for these, but at least now this is clear, it may be worthwhile adding this to the documentation if it is not already included, as it is a fairly common use case and the solution is not obvious without this prior knowledge.
Hi @Louis, this definitely needs some consideration. Per your guidance we checked and the aria-current attribute is on the a tag not the li. Which means there is no way to style the current li tags for sub menus.
For consistency and easy of use it will be great to simply have the current class added to the submenu li tags in the same way as for the main menu.
