DEV Community

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

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 ...
Collapse
 
konrud profile image
Konstantin Rouda • 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...

Collapse
 
bholmesdev profile image
Ben Holmes

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 😁

Collapse
 
konrud profile image
Konstantin Rouda • 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>.

Thread Thread
 
bholmesdev profile image
Ben Holmes

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 πŸ€·β€β™€οΈ

Collapse
 
bholmesdev profile image
Ben Holmes

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.

Collapse
 
naygo profile image
Nayla Gomes

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

Collapse
 
konrud profile image
Konstantin Rouda

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.

Collapse
 
naygo profile image
Nayla Gomes

Okay, thanks!

Collapse
 
grodzickir profile image
Ryszard Grodzicki

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! πŸ‘

Collapse
 
aptlyundecided profile image
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!

Collapse
 
bholmesdev profile image
Ben Holmes • 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 πŸ€·β€β™€οΈ

Collapse
 
dance2die profile image
Sung M. Kim

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~

Collapse
 
nemethricsi profile image
Richard

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

Collapse
 
davidzcode profile image
David

A very instructive post!

Thanks for share πŸ˜„

Collapse
 
annietaylorchen profile image
Annie Taylor Chen

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

Collapse
 
bholmesdev profile image
Ben Holmes

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 πŸš€