🍔 Svelte Hamburgers

A customisable Svelte port of the popular hamburgers.css library.

Installation

npm install svelte-hamburgers -D

If you want to use the Svelte 3/4 version of this library, please checkout svelte-hamburgers@4.

Usage

<script lang="ts">
	import { Hamburger } from 'svelte-hamburgers';
</script>

<Hamburger />

View the full docs.

Props

Property	Type	Default Value	Description
open	string	false	Controls and represents whether the hamburger is open.
type	string	spin	The type of burger you want, you can see the types here, it should be lowercase.
title	string	Hamburger menu	Can be used to add a tooltip, also controls the default value of the ariaLabel prop.
ariaLabel	string	value of title	A label that describes the hamburger menu.
ariaControls	string		This identifies the element(s) whos presence is controlled by the hamburger menu.
--color	string	black	The color of the burger.
--active-color	string	value of --color	The color of the burger when active.
--padding	string	15px	The padding.
--layer-width	string	30px	The width of the burger.
--layer-height	string	2px	The height of the burger.
--layer-spacing	string	6px	The spacing between layers of the burger.
--border-radius	string	4px	The border radius of each burger part.
--hover-opacity	number	0.7	The opacity amount on hover.
--hover-opacity-active	number	value of --hover-opacity	The opacity amount of hover when active.
onclick	MouseEventHandler<HTMLButtonElement>		Fires when the hamburger is clicked. This event won't propagate.

Migrating to svelte-hamburgers v5

• Now requires Svelte 5, if you require Svelte 3/4 support checkout svelte-hamburgers@4.
• We now call stopPropagation on hamburger click event for you.
• The ariaLabel prop now gets its default value from the title prop.

View the full changelog on GitHub.

Support

• Join the discord
  
• Create a issue on the github