svelte-hamburgers

Svelte Hamburgers is a component based on the popular hamburgers.css

Usage no npm install needed!

<script type="module">
  import svelteHamburgers from 'https://cdn.skypack.dev/svelte-hamburgers';
</script>

README

🍔 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

Adding CSS

You need to import the base styling and then a style for each type you want to use (to mitigate unused css)

Base sheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-hamburgers@3/dist/css/base.css" />

Types:
Replace {type} with the type you want

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svelte-hamburgers@3/dist/css/types/{type}.css" />

Sass

Svelte Hamburgers is written in scss, if you would prefer to import the scss files you can do so:

@import 'svelte-hamburgers/scss/base';
@import 'svelte-hamburgers/scss/types/{type}'; /* Replace {type} with the type you want */

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}

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