Responsive Menu

Responsive Hamburger Menu

Mobile screens are small and their tiny headers rarely fit all the navigation links that we want to put in them. This is a very common problem and the reason for the popularity for one of the most played-out interface patterns of the last decade: the hamburger icon (), those three horizontal lines that somehow indicate to contemporary humans that a menu is hidden somewhere.

Ideally, navigation links should be visible all the time and not hidden inside a menu. An optimal setup balances these constraints by displaying all the links on larger desktop screens, then collapsing them behind the hamburger icon when screen space gets tight.

That is the functionality encapsulated in the <hotfx-responsive-menu> custom element. We’ve used this element on many sites on Hot Page already, including our home page and our documentation. Here’s another quick example of the menu. Use the buttons to resize the window and see it in its two different states.

Changing the Breakpoint

The responsive menu accepts a width attribute which lets you control the breakpoint for the metamorphosis of the menu. By default, this value is 800, which means that the element uses a (max-width: 800px) media query and the menu will hide itself behind the hamburger icon when the browser’s width is below 800 pixels. You can play with the following example to see how the breakpoint works.

You can set your breakpoint at the point when your menu links start to feel a bit too crowded for their space. Every menu is different so there’s really no telling what is the best value for you. Always remember to check the result in different browsers and operating systems.

Making it Stylish

The menu exposes different pieces of the markup using part() pseudo elements, so that you can style them with your own CSS.

When the menu is in it’s expanded form on desktop, your content is slotted into a <nav> element that can be styled with ::part(static). By default it’s just a simple flexbox row.

When the menu is in it’s collapsed or hamburger state, things get a little more interesting and you have three parts: ::part(button), ::part(drawer), ::part(backdrop). This is pretty self-explanatory but the button is the hamburger, the drawer is the menu itself and the backdrop is the menu background. On the Hot Page home page, we styled the backdrop using the backdrop-filter property with a blur and a hue-rotate filter for a neat effect.

The hamburger icon itself is an inline SVG image and it’s easy to change its color using the CSS color: property.

You can of course style your menu items in light DOM before they are slotted into the menu. If you want to change the style of your links only when they are shown in the drawer, you can do that using the [state="drawer"] attribute selector on the menu itself. Something like this:

hotfx-responsive-menu[state="drawer"] a {
  color: blue;
}

The above styles will change the links to blue only when they are shown in the drawer. When the menu content is displayed without the drawer you can use [state="static"] to target the content.

By default, the drawer slides in from the right side. But you might also prefer the left side. There’s an easy customization for that by setting a position="left" attribute:

<hotfx-responsive-menu position="left">

Control the Menu with JavaScript

The menu element provides a handful of methods to control it imperatively:

open() to open the menu

close() to close the menu

toggle() closes the menu if it is open and openes the menu if it is closed

You could use this to, for example, include a close button inside the drawer. Take a look how that might work:

<button onClick="this.closes('hotfx-responsive-menu').close()">Close</button>

Changing the Icon

If customizing the size and color of the hamburger icon is not enough for you, you may want to replace it entirely by adding a new one and setting slot="icon". In this example, we’ve included a separate button to close the menu using JavaScript as described in the previous section.

Lightbox