Tailwind hamburger menus.
Lightweight, zero-dependency, animated hamburger menus built on top of Tailwind CSS.
<div class="tham tham-e-squeeze tham-w-6"> <div className="tham-box"> <div class="tham-inner" /> </div></div>Getting started
Installation
npm install tailwind-hamburgers -SAdd a plugin to Tailwind
// tailwind.config.js
module.exports = {
plugins: [require('tailwind-hamburgers')],
}Components
Slider
Squeeze
Spin
Arrow
Arrow Alt
Arrow Turn
Customization
Size
You can set a size of hamburger menu by adding class to element with tham class.
Class | Properties |
|---|---|
| tham-w-4 | height: 16px;width: 10px; |
| tham-w-5 | height: 20px;width: 12.5px; |
| tham-w-6 | height: 24px;width: 15px; |
| tham-w-7 | height: 28px;width: 17.5px; |
| tham-w-8 | height: 32px;width: 20px; |
| tham-w-9 | height: 36px;width: 22.5px; |
| tham-w-10 | height: 40px;width: 25px; |
| tham-w-11 | height: 44px;width: 27.5px; |
| tham-w-12 | height: 48px;width: 30px; |
Color
You can set a color of hamburger menu by adding class to element with tham-inner class name. For example: bg-indigo-500, bg-green-300, bg-gray-900.
See full documentation about background colorsCreated with
☕
in hand by