w1ndst0rm / tailwindcss-hamburgers

Hamburger menus built with Tailwind CSS.

TailwindCSS Hamburgers

Beautiful hamburger menus animated with pure CSS, available as Tailwind CSS components.

Inspired by Kasper Koman's Delicious Hamburgers.

There are four animations available with more on the way.

stack
collapse
spin
twist

Usage

1. Install a plugin

npm install tailwindcss-hamburgers --save

// or

yarn add tailwindcss-hamburgers --save

2. Add a plugin to Tailwind

// tailwind.config.js
module.exports = {
  ...
  plugins: [require('tailwindcss-hamburgers')]
}

3. Add a hamburger to markup

<button class="ham-wrapper ham-stack">
  <div class="ham-inner">
    <span class="ham-bar" />
    <span class="ham-bar" />
    <span class="ham-bar" />
  </div>
</button>

4. Trigger class name for active state

Toggle ham-active class on the element with ham-wrapper class name.

5. Style with Tailwind utility classes. Size and spacing of the bars is relative, using em's. So the menu button can be scaled by changing the font-size of the button.

<button class="ham-wrapper ham-stack ham-active text-3xl focus:outline-none border-2 border-black rounded">
  <div class="ham-inner">
    <span class="ham-bar" />
    <span class="ham-bar" />
    <span class="ham-bar" />
  </div>
</button>

Customization

A different prefix can set by passing it as an arguement to the plugin in your tailwind config file

// tailwind.config.js
module.exports = {
    ...
        plugins: [require('tailwindcss-hamburgers')]({
            prefix: 'ham-',  // defaults to 'ham-'
        })
}

Some parts of the hamburger menu button cannot be modified by adding utility classes. The default settings can be overridden by adding the hamburgers key in the theme configuration. Some or all of the keys can be overridden.

// tailwind.config.js
module.exports = {
    ...
    theme: {
        ...
        hamburgers: {
            base: {
                scale: {
                    spaceBetween: 0.625,
                    barHeight: 0.25,
                    barWidth: 1.75,
                    barRadius: 1.25,
                    padding: 0.5
                },
                color: "#000",
                colorActive: "#000",
                background: "transparent",
                backgroundActive: "transparent"
            }
        }
    },
    plugins: [require('tailwindcss-hamburgers')],
}

Additional variations can also be created by adding them to the theme configuration. In the following example, the classes ham-wrapper-modern, ham-inner-modern, ham-bar-modern, ham-active-modern, and ham-{animation}-modern would be created in addition to the base classes.

// tailwind.config.js
module.exports = {
    ...
    theme: {
        ...
        hamburgers: {
            base: {...},
            modern: {
                scale: {
                    spaceBetween: .5,
                    barHeight: .125,
                    barWidth: 1.25,
                    barRadius: 0,
                    padding: .25
                }
            }
        }
    },
    plugins: [require('tailwindcss-hamburgers')],
}

These following attributes can be modified via the tailwind config file

  "base": {
    "scale": {
      "spaceBetween": 0.625,
      "barHeight": 0.25,
      "barWidth": 1.75,
      "barRadium": 1.25,
      "padding": 0.5
    },
    "color": "#000",
    "colorActive": "#000",
    "background": "transparent",
    "backgroundActive": "transparent",

• The scale object defines the multiplier used with the font size to scale various parts of the hamburger button.
• The color and colorActive attributes define the colors of the bars.
• The background and backgroundActive attributes define the background color of the button.