Hamburger Menu Navbar

<nav class="hamburger-navbar" aria-label="Primary Navigation">

  <a href="#" class="hamburger-brand">
    <span>&lt;/&gt;</span>
    CodeRipple
  </a>

  <button class="hamburger-toggle"
          type="button"
          aria-label="Toggle navigation"
          aria-expanded="false">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <div class="hamburger-links">
    <a href="#">Home</a>
    <a href="#">Components</a>
    <a href="#">Playground</a>
    <a href="#">Blog</a>
    <a href="#">About</a>
  </div>

</nav>

.hamburger-navbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 18px;
  background:#0b1423;
  border:1px solid #1c2a40;
  border-radius:14px;
}

.hamburger-brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
  font-weight:800;
  text-decoration:none;
}

.hamburger-brand span{
  color:#22d3ee;
}

.hamburger-links{
  display:flex;
  align-items:center;
  gap:20px;
}

.hamburger-links a{
  color:#aab4c8;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.hamburger-links a:hover{
  color:#22d3ee;
}

.hamburger-toggle{
  display:none;
  width:42px;
  height:38px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border:1px solid #263750;
  border-radius:9px;
  background:#101a2a;
  cursor:pointer;
}

.hamburger-toggle span{
  width:19px;
  height:2px;
  background:#ffffff;
  border-radius:10px;
  transition:.25s ease;
}

@media(max-width:700px){

  .hamburger-toggle{
    display:flex;
  }

  .hamburger-links{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;

    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;

    padding:10px;

    background:#0b1423;
    border:1px solid #1c2a40;
    border-radius:12px;
  }

  .hamburger-links.open{
    display:flex;
  }

  .hamburger-links a{
    padding:10px 12px;
    border-radius:8px;
  }

  .hamburger-links a:hover{
    background:rgba(34,211,238,.08);
  }

}

const toggle = document.querySelector('.hamburger-toggle');
const menu = document.querySelector('.hamburger-links');

toggle.addEventListener('click', function() {

  menu.classList.toggle('open');

  const isOpen = menu.classList.contains('open');

  toggle.setAttribute('aria-expanded', isOpen);

});

How This Hamburger Menu Navbar Works

The Hamburger Menu Navbar is a responsive navigation component that shows a standard horizontal menu on larger screens and switches to a hamburger-controlled menu below 700px. Its HTML contains three main elements: the CodeRipple brand, a hamburger toggle button, and five navigation links for Home, Components, Playground, Blog, and About.

The main .hamburger-navbar uses Flexbox to align the brand and navigation controls. align-items: center keeps everything vertically centered, while justify-content: space-between places the brand on one side and the navigation on the other. The navbar fills the available width and uses 14px vertical and 18px horizontal padding.

Its appearance is based on a dark #0b1423 background, a #1c2a40 border, and 14px rounded corners. The CodeRipple brand is also a flex container, with an 8px gap between the </> symbol and brand name. The symbol uses the cyan #22d3ee accent while the brand text remains white.

On larger screens, .hamburger-links displays the five navigation links in a horizontal flex row with a 20px gap. Each link uses #aab4c8 text at 14px and a font weight of 600. Hovering changes the text to #22d3ee, providing a simple visual response without changing the layout.

The hamburger button is present in the HTML but hidden on larger screens with display: none. It measures 42px by 38px and contains three empty span elements. Each span becomes a 19px-wide, 2px-high white line, producing the familiar three-line hamburger symbol. The button itself uses a dark #101a2a background, subtle border, and 9px rounded corners.

Responsive behavior starts with the @media(max-width:700px) rule. At this breakpoint, .hamburger-toggle changes to display: flex, making the menu control visible. At the same time, the regular link container becomes an absolutely positioned dropdown-style panel.

The mobile menu is positioned at top: calc(100% + 8px), placing it 8px below the navbar. left: 0 and right: 0 make it span the available navbar width. The links switch from a horizontal row to flex-direction: column, while align-items: stretch lets each navigation option use the available panel width.

The mobile link container starts with display: none. When the open class is present, .hamburger-links.open changes it to display: flex. The panel also receives 10px padding, a dark background, border, and 12px rounded corners. Individual mobile links gain 10px 12px padding, and their hover state adds a subtle cyan-tinted background.

JavaScript controls this open and closed state. The script selects .hamburger-toggle and .hamburger-links, then attaches a click listener to the toggle. Every click runs menu.classList.toggle('open'), adding or removing the class as needed.

After toggling the class, the script checks menu.classList.contains('open'). The resulting boolean is assigned to isOpen and passed to setAttribute() to update the toggle’s aria-expanded value. This keeps the attribute synchronized with the visible menu state. For more information about this JavaScript method, see the MDN classList documentation.

The three hamburger lines include a .25s transition in the CSS, but the supplied component does not define an open-state transform for them. Therefore, they remain three horizontal lines rather than transforming into a close icon.

Customizing the Hamburger Menu Navbar

The component uses straightforward HTML and CSS values that can be adapted to another site’s branding and navigation structure.

• Replace CodeRipple and the </> symbol with your own brand name and visual mark.
• Change Home, Components, Playground, Blog, and About to match your site’s navigation destinations.
• Adjust the 700px media-query breakpoint to control when the hamburger menu replaces the horizontal navigation.
• Change the 20px desktop link gap to increase or reduce spacing between navigation items.
• Modify #0b1423, #1c2a40, and #22d3ee to create a different background, border, and accent palette.
• Adjust the 42px by 38px hamburger button dimensions or the 19px line width to change the menu control’s size.
• Change the 8px value in top: calc(100% + 8px) to control the gap between the navbar and mobile menu.
• Modify the mobile link padding of 10px 12px to create more compact or spacious menu items.

Where to Use This Hamburger Menu Navbar

This navbar is useful when a horizontal desktop navigation needs to remain practical on narrower screens without permanently occupying extra vertical space.

• Responsive business websites
• Developer portfolios
• Blogs and documentation websites
• Component libraries
• Landing pages with several primary links
• Small web application headers

The 700px breakpoint keeps the desktop layout straightforward while providing a separate vertical menu for smaller displays. If one of your navigation sections needs its own submenu instead, the Dropdown Navbar offers a click-controlled nested navigation pattern.

Frequently Asked Questions

Does the Hamburger Menu Navbar use JavaScript?

Yes. JavaScript toggles the open class on .hamburger-links when the hamburger button is clicked and synchronizes the button’s aria-expanded attribute with the menu state.

When does the hamburger button appear?

The button is hidden by default and becomes visible inside the max-width: 700px media query. Above that width, the navigation links remain in a horizontal row.

Does the hamburger icon turn into a close icon?

No. Although the three lines have a .25s transition, the supplied CSS does not contain active-state transforms for them. The icon remains as three horizontal lines while the menu is open.

Does the mobile menu close when a navigation link is clicked?

No. The current JavaScript only responds to the hamburger toggle button. There are no click listeners on the navigation links or the document for automatically closing the menu.

The Hamburger Menu Navbar combines a desktop Flexbox layout, a breakpoint-based mobile panel, and a small JavaScript class toggle to provide practical responsive navigation without changing the desktop menu structure.