Burger

import "@taprootio/espalier/burger";

<esp-burger>

Animated burger button for showing and hiding navigation components.

Attributes

<esp-burger> has the following attributes:

menu-open

menu-open has a default value of false.

Whether or not the burger indicates an open state.

presentation-only

presentation-only has a default value of false.

Render only the animated burger graphic. Use this when an outer control owns activation, labeling, and expanded state.

Events

<esp-burger> emits the following events:

esp-burger-opened

esp-burger-opened is of type CustomEvent.

Emitted when the button is clicked and the image changes from a burger to an X.

esp-burger-closed

esp-burger-closed is of type CustomEvent.

Emitted when the button is clicked and the image changes from an X to a burger.

CSS Properties

<esp-burger> has the following CSS properties:

--esp-color-burger

The color of the burger lines when closed.

--esp-color-burger-hover

The hover color of the burger lines when closed.

--esp-color-burger-opened

The color of the burger lines when open.

--esp-color-burger-opened-hover

The hover color of the burger lines when open.

--esp-size-burger-stroke

The stroke width of the burger lines.

Components API Guides Getting started Styling Espalier Browser support GitHub npm package Taproot I/O