DEV Community

Responsive Navbar without Javascript

Shubham Tiwari on December 22, 2022

Greetings to all. Today I'll demonstrate how to make a responsive navbar without Javascript that has a dropdown effect for mobile devices. The majo...

Read full post

violacase • Dec 25 '22

When you incorparate a polyfill when deploying you can be certain legacy browsers will work. Best way that work for me is to use PostCSS-plugins in the workspace.

Shubham Tiwari • Dec 25 '22

I have to learn about PostCSS

violacase • Dec 25 '22

Make it one of your near future learning goals. Developing is SO much more fun with a good eco system. (VSCode, Vite, PostCSS)
PostCCS is not too difficult. It does the hard work fór you!

Shubham Tiwari • Dec 25 '22

I checked PostCSS and it's cool
Also I found it is used with TailwindCss as well.
I worked with Webpack but will check vite too.

violacase • Dec 25 '22

Vite is GREAT for MANY good reasons. Check it out!
You'll never want to use webpack anymore. Webpack is old school. Don't believe me. Believe wat you'll encounter with Vite!

Shubham Tiwari • Dec 25 '22

Yeah i would use it for sure
Thanks for the guidance

violacase • Dec 25 '22

Merry Christmas and a Happy New Year by the way,

Shubham Tiwari • Dec 25 '22

Merry Christmas and Happy New Year to you too

Alicia Sykes • Dec 22 '22 • Edited

Nice article, but the burger button doesn't seem to work in the demo.
~~~Possibly it's a Chrome-only feature you're using, in which case adding a fallback would be good.~~~
Ah just seen the can i use link, probably best to avoid using :has as it's not at all well supported.

Shubham Tiwari • Dec 22 '22

Are you using Firefox as your browser?

Alicia Sykes • Dec 22 '22

Yeah

Alicia Sykes • Dec 22 '22

You can use the @supports selector to add the functionality for the remaining browsers.

This would be important, as looks like :has isn't supported on many mobile browsers - and that's the only time the burger menu will be visible. So using it alone in this situation, is pretty much useless!

Shubham Tiwari • Dec 23 '22

Yeah for the fallback i have to provide something as i didn't have used javascript, i have to build the logic in css for the same

Zoppatorsk • Dec 22 '22

As seen on caniuse this do not work on firefox... and not on firefox mobile either. My own testing also shows it does not work on firefox but do work in chrome.

Similar way of doing it is possible but without using ":has". Would suggest using that or JS until browser support is up to snuff if going to put a site online. But yeah, interesting to see some new CSS stuff being used.

Shubham Tiwari • Dec 22 '22 • Edited

Yeah that's why i put the caniuse link because the browser support is not vast for has selector But the power it gives in css ,
firefox and other browser will make it supportable in near future

Molly Stewart-Gallus • Dec 25 '22

This isn't accessible.

You want to set aria-expanded and other attributes properly.

A details element almost works but still has problems.

Also please use a nav labelled by a heading and do not put interactive elements inside a button. Interactive elements inside a button are ignored by the accessibility tree.

Something like the following might be a better start towards a better nav menu.

<nav aria-labelledby=""menu-title">
  <header>
    <h2 id="menu-title">Menu</h2>
    <button id="menu-button" aria-expanded="false" aria-controls="navigation">Open/Close Menu</button>
  </header>
  <ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
~~~