Simply nav logo

Simply Navigation

Lightweight simple navigation built with flexbox and vanilla JavaScript




Sticky (fixed) navigation

To enable a fixed nav bar, add class -sticky to the nav-main element.

Sticky Nav is Off

Toggle sticky nav bar

Note: Sticky navigation bar requires padding and/or margin on the parent or adjacent element. For example, on this page the adjacent main HTML element has a top padding of 6.5rem (nav height is 4.5rem).

Menu icon

To enable the traditional menu icon, remove class -offset from the burger element.

Traditional icon is Off

Toggle menu icon

Bottom mobile nav bar

To enable the bottom mobile nav bar, add class -bottom on the nav-main element.

Bottom mobile nav bar is Off

Toggle bottom mobile nav

Note: Bottom mobile nav bar requires a sticky navigation bar. To enable a fixed nav bar, add class -sticky to the nav-main element. See the Sticky navigation section for additional info.

How to use

Clone or download the repository to build a static website. Or alternatively insert the respective files into your project.

Example Link

This is an example that demonstrates an anchor link on the same page. The mobile menu closes when this link is chosen. This provides a more seamless experience for the user without requiring them to close the mobile menu after choosing a link.