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

Support

• Join the discord
• Create a issue on the github