How to Use Hamburgers in Sage

Implementing animated hamburger menu icons is a nice touch, but something I’ve always found to be a pain — particularly adjusting the sizing/positioning/transformation of the bars in the "open" state.

I just found Hamburgers and gave it a test drive. Nice library and pretty easy to get set up.

Install

yarn add hamburgers

Import in main.scss

@import "~hamburgers/_sass/hamburgers/hamburgers";

Add the markup

Probably in your header.blade.php partial:

<button class="hamburger hamburger--vortex" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

In this case, I’m using the ‘vortex’ type.

Customize as desired in _variables.scss

Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.

/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);

Again, I’m using the ‘vortex’ type here.

Add JS to make it functional to common.js

export default {
  init() {
    // JavaScript to be fired on all pages
    $('.hamburger').click(function() {
      $(this).toggleClass('is-active');
    });
  },
  finalize() {
     // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

You would likely also be toggling the state of your menu in the same click handler.

That should be it.

Join the discussion on Roots Discourse