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

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"
        style={{ backgroundColor: "blue", height: "350px" }}>
      </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