Svelte-hamburgers NPM

🍔 Svelte Hamburgers

Works with Svelte 3 & 4!

The ease to use Hamburger menu component for Svelte! Fully customisable with an extensive set of options, powered by a modified version of hamburgers.css.

Example of how to use svelte-hamburgers, view the repl here

Install

We will save it as a dev dependancy with -D

npm i svelte-hamburgers -D

How to use?

<script>
    import { Hamburger } from 'svelte-hamburgers';

    let open;
</script>

<Hamburger bind:open />

The open variable can be then used to handle your menu, for example:

{#if open}
    <!-- show menu -->
{/if}

Migrating

If you are migrating from 3.x.x to 4.x.x heres what you need to know:

CSS is now included! This means no more importing the css you need, you can remove the cdn tags you had before

The Hamburger component is a named import:

<script>
    // Old way
    import Hamburger from 'svelte-hamburgers';

    // New way
    import { Hamburger } from 'svelte-hamburgers';
</script>

Properties

You can use these to customise the hamburger, just provide them as props to the burger component, for example <Hamburger --color="white" />

Property	Type	Default	Description
type	string	spin	The type of burger you want, you can see the types here, it should be lowercase.
ariaLabel	string	Hamburger menu	The aria label of the burger.
--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.