NASA Proceeds to Mars

    svelte-hamburgers
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.1 • Public • Published

    🍔 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

    Install

    npm i svelte-hamburgers

    DownloadsWeekly Downloads

    684

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    38 kB

    Total Files

    8

    Last publish

    Collaborators

    • ghostsos