Iceburger

Cool Burger

A simple burger menu component library.
Designed for mix & match - use just the burger, use just the drawer, or use them together

npm i react-iceburger

import { Iceburger, Drawer } from 'react-iceburger';

Burger Prop Options

All props are optional with sensible defaults

size : number - defaults to 3

<Iceburger size={2.5}/>

Note: A minimum size prop value of 2 is recommended for best appearance.

color : string - defaults to black
accepts any valid css color value

<Iceburger color="rgba(0, 50, 200, .9)" />

lineThickness : string - "thin" | "standard"(default) | "bold"
relative thickness of burger lines

duration : number - defaults to 300
millisecond duration of animation sequence

<Iceburger duration={300} />

kind : string - "standard"(default) | "honeycomb" | "arrow"
menu variant

className : string - defaults to an empty string
use custom styles with caution, as tweaking certain style properties may break the relationship between lines

style : CSSProperties
again, be cautious when overriding styles.
example cases would be to fix the burger / drawer on scroll, or create depth with a box shadow:

      <Iceburger
        onClick={toggleOpen}
        lineThickness='bold'
        kind="honeycomb"
        position="fixed"
      />
      <Drawer
        open={isOpen}
        orientation="left"
        height={350}
        style={{ 
          backgroundColor: "rgba(200, 200, 255, .9) ", 
          position: "fixed",
          boxShadow: "rgba(0, 0, 0, 0.24) 0px 5px 13px"
        }}>
          <a href="/">Hello</a>
          <br />
          <a href="/">Iceburger</a>
          <br />
          <a href="/">Drawer</a>
      </Drawer>

onClick : () => void
pass a simple callback to have the burger manage toggling of boolean state

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => setIsOpen(prev => !prev);

  return (
    <>
      <Iceburger
        size={3}
        color="white"
        kind="honeycomb"
        duration={300}
        lineThickness='bold'
        onClick={toggleOpen}
        className="burger-container" />

      <Drawer
        open={isOpen}
        orientation="right"
        height="800px"
        style={{ backgroundColor: "blue", }}>

      </Drawer>
    </>
  )
}

export default App;

Drawer Prop Options

The open and orientation props are mandatory:

export interface DrawerProps {
  open: boolean;
  orientation: "left" | "right";
  children?: JSX.Element | JSX.Element[];
  width?: number;
  height?: number;
  duration?: number;
  className?: string;
  style?: CSSProperties;
}

open : boolean
The drawer component must receive a boolean state value in order to transition between states

orientation : "left" | "right"
"left" - drawer emerges from the left edge of the viewport
"right" - drawer emerges from the right edge of the viewport

Changelog

8/24/23: v0.1.26 - support sequential focus navigation while drawer is visible