Svelte Hamburgers

Usage

Get started by putting a hamburger menu on the page

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

<Hamburger />

You can bind to the `open` prop to get it's state

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

    let open = $state(false);
</script>

<Hamburger bind:open />

<p>Hamburger open: {open}</p>

Hamburger open: false

You can set your preferred animation type

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

<Hamburger type="elastic" />

Set the title (and by extension aria-label)

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

<Hamburger title="Toggles the cat picture" />

Why not change the style

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

<Hamburger --color="red" />

We can then put this all together and create a full nav

<script>
    import Hamburger from '$lib/Hamburger.svelte';
    import { fly } from 'svelte/transition';

    let open = $state(false);
</script>

<nav>
    <Hamburger
        bind:open
        type="collapse"
        title="Toggle nav links"
        ariaControls="nav"
    />

    {#if open}
        <ul id="nav" class="menu" transition:fly={{ y: -15 }}>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    {/if}
</nav>

Props

Property	Type	Default Value	Description
`open`	`string`	`false`	Controls and represents whether the hamburger is open.
`type`	`string`	`spin`	The type of burger you want, you can see the types here, it should be lowercase.
`title`	`string`	`Hamburger menu`	Can be used to add a tooltip, also controls the default value of the `ariaLabel` prop.
`ariaLabel`	`string`	value of `title`	A label that describes the hamburger menu.
`ariaControls`	`string`		This identifies the element(s) whos presence is controlled by the hamburger menu.
`--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.
`onclick`	`MouseEventHandler<HTMLButtonElement>`		Fires when the hamburger is clicked. This event won't propagate.

Types

3dx

3dx-r

3dy

3dy-r

3dxy

3dxy-r

arrow

arrow-r

arrowalt

arrowalt-r

arrowturn

arrowturn-r

boring

collapse

collapse-r

elastic

elastic-r

emphatic

emphatic-r

minus

slider

slider-r

spin

spin-r

spring

spring-r

stand

stand-r

squeeze

vortex

vortex-r