Discussion on: Building a sexy, mobile-ready navbar in any web framework

[Alex]

I have been tinkering around with web since 2012 and I had no idea that nesting divs inside of list elements was bad.

Especially because material components in libraries like vuetify, angular-material, or material-ui for react typically have boat loads of elements kind of packed into their 'list-items'.

But now I understand that the material list components in the various libraries are actually just divs which have been morphed into a component 'class'.

Thanks for the post!

[Ben Holmes]

Thanks so much! But yeah, it's crazy right? Most component libraries just bend <div>s to their will for everything. Buttons and toggle dropdowns come to mind for that.

But to clarify that "no divs in lists" comment: you can definitely use a div when it's nested inside another list item. So this is fine:

<ul>
  <li><div></div></li>
</ul>

However, it becomes a problem if you start using divs alongside other list items. So this would be bad:

<ul>
  <li><!--my awesome company logo--></li>
  <div class="dropdown-toggle">
    <li>...</li>
    <li>...</li>
  </div>
</ul>

This would pose a problem for our dropdown, since we want our logo to be another list item for supposed accessibility, but we can't wrap our other links in a dropdown div. Just scrapping the list entirely fixes that without a11y issues 😁

An alternative may be changing just the dropdown toggle to a ul, but this would exclude our homepage link from our "list" of navigation options. We're really splitting hairs at this point, but given that trade-off and added development overhead, I didn't think it's worth it 🤷‍♀️