SCRIPT NINJA / PRODUCT

Hamburgers Animated Menu Icons

A small CSS and Sass library of animated menu buttons. Add a polished navigation toggle to a website while keeping the implementation simple and customisable.

Hamburgers Animated Menu Icons collection illustration
Collection illustration. See the author's demo for the upstream design.

A small CSS and Sass library of animated menu buttons. Add a polished navigation toggle to a website while keeping the implementation simple and customisable.

What you can build.

  • CSS-only menu button animations
  • Compiled CSS and Sass source
  • Customisable size, colour and spacing

Inside the download.

  • Upstream source files and setup documentation
  • UPSTREAM-LICENSE.txt with the original copyright notice
  • SOURCE.json and SCRIPT-NINJA-README.md

Getting started.

Use dist/hamburgers.min.css and the button markup in README.md.
Toggle is-active on click in your navigation code.

Add an accessible label, aria-expanded state and reduced-motion handling when connecting the menu.

Licence and credits.

MIT licence. You may use, modify and redistribute the code, including commercially, while retaining the upstream copyright and licence notice. Dependency licences and third-party image or trademark rights apply separately.

Original author: Jonathan Suh. Curated by Script Ninja.

Bundled raster demo images are neutral SVG placeholders. Replace remote images, sample names and brand marks before launch. The upstream demo may show artwork that is not in this download.

Support.

Free community source package. Use the upstream documentation and issue tracker. Custom implementation is available by project enquiry.

Make Hamburgers Animated Menu Icons fit your project. Illustrated project structure.A practical starting point for your project

PLAN THE NEXT STEP

Make Hamburgers Animated Menu Icons fit your project.

Review the source package and setup notes first. Replace demonstration content, check the dependencies you install and test the result against the pages or workflow you need.

MAKE IT ACTIONABLE

From download to your own implementation.

Choose the next step that matches where you are in the project.

Read the package notes

Start with the included README and licence files. Check CSS / Sass requirements before installing.

Download the source

Adapt your content

Replace sample text, brands and placeholders with assets you have permission to use.

Discuss customisation

BEFORE YOU BEGIN

A few useful answers.

Have a question about your project or account?

Send your requirements
Can I use these packages commercially?

The current source packages use the MIT licence. Keep the original copyright and permission notices, and check separate rights for images, trademarks and dependencies.

Are the downloads ready-made hosted websites?

These are source packages with setup notes. You will need the required development tools and your own hosting. Read the product requirements before downloading.

Can Script Ninja customise a template?

Yes. Send the template name, your content and the changes you need. Custom implementation is scoped and quoted separately.

LET'S MAKE SOMETHING USEFUL.

Need a hand adapting this package?

Bring your goals, your questions and the work you want to move forward.

Share your template brief