Responsive Hamburger Sidebar Navigation In Pure JavaScript – Omega.js

Category: Javascript , Menu & Navigation | April 5, 2019
Views Total:3,440 views
Official Page:Go to website
Last Update:April 5, 2019


Responsive Hamburger Sidebar Navigation In Pure JavaScript – Omega.js


Omega.js is a modern responsive mobile-first navigation system for the web.

It uses CSS media queries to detect the screen size and collapse the regular navbar into a hamburger sidebar navigation (aka. off-canvas navigation).

Click/tap the hamburger button to toggle the sidebar navigation sliding out from the edge of the screen.

See also:

How to use it:

Import the Omega’s JavaScript and CSS files into the document.

<link rel="stylesheet" href="assets/css/omega.css">
<script src="assets/js/omega.js"></script>

Create the HTML for the sidebar navigation and done.

<div id="omega">
  <div id="omega-content">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    <div class="omega-links">
      <a href="#" class="button">Link 1</a>
      <a href="#" class="button button-outline ">Link 2</a>
  <button id="omega-button">&#9776;</button>
  <div id="omega-sidebar">
    <div id="omega-sidebar-header"></div>
    <div id="omega-sidebar-body"></div>
  <div id="omega-overlay"></div>

You Might Be Interested In:

Leave a Reply