Socket
Socket
Sign inDemoInstall

tailwind-hamburgers

Package Overview
Dependencies
0
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-hamburgers

Hamburger menus built with Tailwind CSS


Version published
Maintainers
1
Weekly downloads
1,132
decreased by-31.72%

Weekly downloads

Readme

Source

Tailwind Hamburgers

Zero-dependency, hamburger menus built with Tailwind CSS.

Demo

You can check out the demo here.

Usage

  1. Install a plugin
npm install tailwind-hamburgers --save

// or

yarn add tailwind-hamburgers --save
  1. Add a plugin to Tailwind
// tailwind.config.js
module.exports = {
  ...
  plugins: [require('tailwind-hamburgers')],
}
  1. Add an hamburger to a markup
<div class="tham tham-e-squeeze tham-w-6">
  <div class="tham-box">
    <div class="tham-inner" />
  </div>
</div>
  1. Trigger class name for active state

Toggle tham-active class on the element with tham class name.

Customization

Size

You can set a size of hamburger menu by adding class to element with tham class name.

ClassProperties
tham-w-4height: 16px; width: 10px;
tham-w-5height: 20px; width: 12.5px;
tham-w-6height: 24px; width: 15px;
tham-w-7height: 28px; width: 17.5px;
tham-w-8height: 32px; width: 20px;
tham-w-9height: 36px; width: 22.5px;
tham-w-10height: 40px; width: 25px;
tham-w-11height: 44px; width: 27.5px;
tham-w-12height: 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 colors

Credits

This project is a port for Jonathan Suh project, huge kudos to him!

License

MIT

Keywords

FAQs

Last updated on 24 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc