DEV Community

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

Ben Holmes on October 06, 2020

I've been building a lot more static sites recently, and every one of them needs the same thing: A nice and responsive navigation bar with logo ...

Read full post

Konstantin Rouda • Oct 9 '20 • Edited

We're not using an unordered list (ul) for our links. You might see this recommendations floating around the web, but this article from Chris Coyier really solidified things for me.

Have you read the following post where Chris acknowledged that the previous post wasn't as right as he'd thought it would be?

At the end of this article, he's changing his previous belief.

css-tricks.com/wrapup-of-navigatio...

Ben Holmes • Oct 9 '20

Good catch! To be honest, I haven't ready this article myself. I wouldn't say this completely invalidates the approach I recommended here though. As a described here, adding unordered lists for this "type" of navigation would actually hurt accessibility. This is because we can't say that our logo / homepage link belongs to the list, which is a bit odd.

That said, this post raises some good points about role=navigation for example. I'll do a little digging on aria attributes to see how I can clarify my post 😁

Konstantin Rouda • Oct 9 '20 • Edited

As far as logo/homepage link is concerned, I'm not sure why can't you put your logo outside your <ul> but inside <nav> element? It would be exactly what you did in your markup but instead of using <div> you would use <ul>. As far as I can say, it would be valid accessible markup, as both <ul> menu and logo/homepage link reside inside the <nav>.

Ben Holmes • Oct 9 '20

Fair! I definitely agree it would be valid. However, given the reason screenreader users enjoy list groupings, it wouldn't make much sense to exclude the homepage link for that list.

Take the L shortcut for finding lists as an example. If a user were to find our new dropdown element in our nav, they may assume these are all the links they can navigate to, without clear direction on getting back to the homepage. At that point, there's not a lot of benefit to adding that list element for a11y. It also adds some complexity to our markup since we need to style both the li and the link inside the li (been burned by this before).

It's all bike-sheading at this point 😆Just thinking that uls wouldn't add a lot of value here, and it would make the dev process a little more complex 🤷‍♀️

Ben Holmes • Oct 11 '20

Update: I linked this article above instead of my previous recommendation! Kept the code samples as-is, but added a clearer explanation of the design decision as well.

Nayla Gomes • Oct 7 '20

Hi! I loved your post. I didn't know that not using a cluttered list for links is good, thanks! I really liked your comments in the codes, especially in CSS, I always get confused about 'what does this line of CSS do?' haha, and how you point out important things you used and explain this is wonderful for people like me who are learning. Thanks again: D

Konstantin Rouda • Oct 9 '20

Before you chose not to use a list in navigation. Please read the refuting article (css-tricks.com/wrapup-of-navigatio...) by Chris Coyier where he acknowledges that the previous article wasn't that obvious, to the least. It's very dangerous to say that something should or should not be used anymore only after reading one article.

Nayla Gomes • Oct 9 '20

Okay, thanks!

Ryszard Grodzicki • Oct 11 '20

Well, that's one of the most universally useful things I read in a while. Basically every dev in it's career, or in it's project, will stumble upon a task to create this "boilerplate" code for a webpage. And will probably use his outdated html/CSS knowledge or spend hours on reminding himself about new html tags, CSS animations and media queries. This articles saves a lot of time and dilemmas about technologies - simple, plain html/css stack and tips about applying it in popular frameworks.
Amazing! 👏

Alex • Oct 8 '20

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 • Oct 8 '20 • Edited

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 🤷‍♀️

Sung M. Kim • Oct 8 '20

Nice post!

I was working on a hamburger menu with ul/li and replaced'em with divs and spans as well as adding aria attributes~

Richard • Oct 9 '20

Very nice post thanks!!! 💜
One typo I guess: in the very first React example the onClick function should be toggleMobileNav instead of mobileNavOpened. Cheers 😊

David • Oct 7 '20

A very instructive post!

Thanks for share 😄

Annie Taylor Chen • Oct 8 '20

Awww love those cats! I really like how easy the animations are in svelte.

Ben Holmes • Oct 8 '20

Haha yeah, I could've removed them now that we have our production site up-and-running. Just thought it added some feline charm 😸

+1 for Svelte too! Considered showing off Svelte transitions to replace the manual CSS too, but that was a bit framework-specific. To whoever's reading this, go check out Svelte's quaint tutorial on transitions. They're incredible 🚀