svelte-hamburgers's Introduction

🍔 Svelte Hamburgers

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.
--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.