Posted by NumerousHats on Sat, Jan 18, 2025 - 9:37am

I am adding a menu to a non-header region of a layout. I can control the classes of the wrapper and the heading from the layout GUI block configuration, but I'm not sure how to change/add classes to the <ul> element of the menu (or the <li>s for that matter). I know that I can override theme_menu_tree (which I'm assuming is what is generating the menu's <ul>), etc., but how do I target changes to just a menu in a particular region?

BTW, this is in regards to the primary navigation menu. I have it both in the header (naturally), but I also want to display relevant submenus in a sidebar and I only want to modify the classes in the sidebar, not the header. So, I can't just target 'main-menu'.

This sort of thing confused the heck out of me in D7, and it still confuses me in Backdrop...

Thanks in advance.

Comments

Sat, Jan 18, 2025 - 1:26pm by yorkshirepudding

You can use the Menu Attributes  module to add classes to the <li> elements.  I'm not sure of any way to add classes to the <ul> element though.

However, I would have thought you could target the menu using CSS. Something like this: 

.l-sidebar .block-class ul {
  /** Your CSS here */
}

 

 

Sat, Jan 18, 2025 - 3:01pm by NumerousHats

However, I would have thought you could target the menu using CSS.

I knew somebody would say that 🙂

The reason is that I'm using a customized version of the Bootstrap Lite theme and I'd like to use the Bootstrap navbar component, which (if I understand correctly -- I'm still somewhat new to Bootstrap) requires a navbar-nav class on the <ul> (https://getbootstrap.com/docs/5.3/components/navbar/). 

I guess I'll just have to manually theme it or do some (potentially brittle) kludge overriding theme_menu_tree. I just thought there might be some nifty way of doing it with hooks or preprocess functions or something (which I never really wrapped my head around).