Skip to content

madeleineostoja/svelte-hamburger

Repository files navigation

Svelte Hamburger

NPM License

Featherweight, performant, animated hamburger menu icon for Svelte with no external dependencies.

Usage

npm i svelte-hamburger
<script>
  import Hamburger from 'svelte-hamburger';

  let open = false;
</script>

<Hamburger {open} on:click={() => open = !open} />

Properties

Property Type Default Description
open boolean false Whether hamburger is open
duoLine boolean false Whether to only use 2 lines for the icon
<Hamburger open={false} duaLine={true} />

Styling

Set the desired height, width, and color of the icon direclty on the component. It will consume class strings and you can target them with a :global modifier in your Svelte styles.

<style>
  header :global(.hamburger) {
    /* Custom styles */
  }
</style>

<header>
  <Hamburger class="hamburger" />
</header>

Additionally the following CSS properties are available for more fine grained control over the style of the icon.

Property Default Description
--line-width 2px Width of the icon lines
<Hamburger --line-width="3px" />