Problem : Child items of the Nav Items element are all <li> by default (we understand why… : since Nav Items is a <ul>). However, we have the possibility to change the Nav Items HTML tag to something else. Even if we do that, the child elements are always <li> by default. (Seems a default behavior of Bricks we can’t control)
Our goal is to include a div (text + image) in the Nav items so they show on the dropdown on mobile. However we do not want this div to be a <li>. We would like to change the Nav items element to a Div. Then add a <ul> wrapper for the links. By doing that, we can include any other elements directly in the Nav items (div, image, heading, etc.)
Bricks adds the ul > li menu item structure for you to follow accessibility best practices. As also mentioned in the Academy article Menu Builder – Bricks Academy
Does the “li” cause any problems with your div inside of it, or what is the specific reason for needing to remove the surrounding li? Don’t get me wrong, I just want to understand the (supposed) problem
Thanks for the reply. Lets say we want to add a contextual information in the mobile menu such as :
an Image (no link on the image),
Call to action text (just a couple word)
split our navigation into 2 “section”, each with their own “title”…
we wouldn’t want these elements to be individual “li” because it’s not really part of the navigation…? I may be wrong, but I feel including an image in a li would be weird for a person with a screen reader ?
I think in a situation like that, it would be great if we could have access to the HTML tag element so we can create our own logical HTML structure for the mobile menu. (All of this only applies to the mobile menu)
We had a non-ul > li structure in the first version of the menu and adjusted it based on community feedback:
As you can see, the thread has quite a lot of feedback and opinions. From our point of view, there is nothing against nesting non-menu items in a li since they are still part of the whole menu. This should also be unproblematic for screen reader users since you can always add aria labels, telling the screen reader to skip this part.
If you have a trustworthy source that sheds light on the subject in detail, we would be very happy if you share it with us
