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

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

---

Burger Prop Options

All props are optional with sensible defaults

size : number - defaults to 3

1<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

1<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

1<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:

1      <Iceburger
2        onClick={toggleOpen}
3        lineThickness='bold'
4        kind="honeycomb"
5        position="fixed"
6      />
7      <Drawer
8        open={isOpen}
9        orientation="left"
10        height={350}
11        style={{ 
12          backgroundColor: "rgba(200, 200, 255, .9) ", 
13          position: "fixed",
14          boxShadow: "rgba(0, 0, 0, 0.24) 0px 5px 13px"
15        }}>
16          <a href="/">Hello</a>
17          <br />
18          <a href="/">Iceburger</a>
19          <br />
20          <a href="/">Drawer</a>
21      </Drawer>

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

1function App() {
2  const [isOpen, setIsOpen] = useState(false);
3
4  const toggleOpen = () => setIsOpen(prev => !prev);
5
6  return (
7    <>
8      <Iceburger
9        size={3}
10        color="white"
11        kind="honeycomb"
12        duration={300}
13        lineThickness='bold'
14        onClick={toggleOpen}
15        className="burger-container" />
16
17      <Drawer
18        open={isOpen}
19        orientation="right"
20        height="800px"
21        style={{ backgroundColor: "blue", }}>
22
23      </Drawer>
24    </>
25  )
26}
27
28export default App;

---

Drawer Prop Options

The open and orientation props are mandatory:

1export interface DrawerProps {
2  open: boolean;
3  orientation: "left" | "right";
4  children?: JSX.Element | JSX.Element[];
5  width?: number;
6  height?: number;
7  duration?: number;
8  className?: string;
9  style?: CSSProperties;
10}

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