DEV Community

Responsive Navbar using HTML, CSS, and Javascript

Amrin on December 14, 2021

For every CSS project we build, a responsive navigation bar is a must-have. So, today we are going to build a responsive navigation bar using HTML...

Read full post

benny • Feb 10 '22

Thanks for this useful post! I was wondering how to setup a hamburger menu, I'll use this as a guideline. Btw I noticed a type-o:

And to the nav__link's we added display inline-block so that the links say next to each other.

Have a good one Amrin :)

Amrin • Feb 11 '22

thank's for pointing it out benny :D

Gustavo Scarpim • Dec 14 '21

Nice NavBar, I suggest you change your link in github is incorrect and your website.

Good job!

Amrin • Dec 14 '21

thanks Gustavo.
it works now

Bradley Oliver • Dec 15 '21

naw, still broken

Amrin • Dec 15 '21

It works for me. I don't know what's causing this

github.com/Coderamrin/responsive-n...
coderamrin.github.io/responsive-na...

Gustavo Scarpim • Dec 15 '21

Me too

Thomas Lepérou • Dec 18 '21

Thanks for sharing.

Being evolving in the web industry since the very early 2000's, I'd say that dealing with navigation, is tricky. A navigation fulfils critical responsibilities:

it designates an informational structure to users and crawlers (SEO-able)
it provides a way to navigate through the information (readable)
it presents a certain state of the information (addressable)
it has a way to interact with itself (usable)
and might be used within different platform (interoperable)

SEO-able

Delegating the most critical part of the navigation with a div > span must be avoided. Except if you have a good reason and you provide the proper aria-attributes to take over with the right DOM's semantic.

With better semantic, better structure, better opportunities for the SEO.

addressable

The state of the nav__link.hide should be bubbled up to the top level's viewport. Why? Because the display: fixed is applied to the viewport, and become a first (depth) level of reading. As a rule of thumb, always use the URL to represent the first level of reading, eg:

Thus, the state of your main navigation is addressed within the URL. Sharing a link and refreshing the page work!

usable

I consider relying on the native navigation of the browser as one of the best practice in frontend development. Updating the the URL via a link and without using JS make things sure to work, and easy to maintain over the time.

interoperable

Nowadays, frontend developers face with complexity by coding programs executed in web browsers, webworkers and backends. Adding listeners should be done carefully, cause it's tightly coupled with the DOM's rendering (browser only).

Could be something like,

  <body>
    <header>
      <a href="/">logo</a>
      <nav>
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">contact</a></li>
          <li><a href="#">blog</a></li>
        </ul>
      </nav>
      <a href="#open-main-nav">
        <span>Toggle main navigation</span>
        <i class="burger-icon" aria-hidden="true"></i>
      </a>
    </header>
  </body>

For the css,

// nav when open
body.main-nav-open header > nav {}

// nav by default
header > nav {}

// links on nav
header > nav a {}

// logo
header > a:first-child {}

// button to open main nav
header > a:last-child {}

// keep visible the trigger for screen reader only
header > a:last-child span {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ support */
    clip: rect(1px, 1px, 1px, 1px); /* other browsers */
}

// your own icon's implementation (fontawesome or whatever)
// CSS-based only. DOM must not be required
i.burger-icon {}

// responsiveness
@media screen and (/* your breakpoints */) {
  header > nav > ul { /* display or not */ }
}

Finally, the JS

const toggleNavWhenLocationAsks = () => {
  const body = document.getElementsByTagName('body')[0];

  if (location.hash === '#main-nav-open') {
    return body.classList.add('main-nav-open');
  }

  return body.classList.remove('main-nav-open');
}

// toggle nav onload
// run only when window is available
window && toggleNavWhenLocationAsks();

// toggle nav on URL changes
// run only when window is available
window && window.addEventListener('hashchange', toggleNavWhenLocationAsks);