Atlas

Hamburger

An animated menu button wrapping hamburgers.css, with seventeen animations and an open state you can bind with x-model.

<x-atlas::hamburger> 

<x-atlas::hamburger label="Menu" />
Preview follows the site's light/dark mode. Open standalone →

The component is a thin Atlas wrapper around hamburgers.css: the markup is the library's hamburger-box/hamburger-inner pair, the animation comes from a hamburger--{variant} class, and Atlas contributes the bar size, radius and colors as tokens — including a separate color for the active state.

Animations

variant takes any hamburgers.css animation name. They differ only in how the three bars become a cross, so choose one and use it everywhere: a menu button that animates differently on two pages reads as two different buttons. 

<x-atlas::hamburger variant="collapse" label="Collapse" />
<x-atlas::hamburger variant="spin" label="Spin" />
<x-atlas::hamburger variant="elastic" label="Elastic" />
<x-atlas::hamburger variant="squeeze" label="Squeeze" />
<x-atlas::hamburger variant="arrow" label="Arrow" />
<x-atlas::hamburger variant="arrowturn" label="Arrow turn" />
<x-atlas::hamburger variant="boring" label="Boring" />
<x-atlas::hamburger variant="emphatic" label="Emphatic" />
<x-atlas::hamburger variant="minus" label="Minus" />
<x-atlas::hamburger variant="slider" label="Slider" />
<x-atlas::hamburger variant="spring" label="Spring" />
<x-atlas::hamburger variant="stand" label="Stand" />
<x-atlas::hamburger variant="vortex" label="Vortex" />
<x-atlas::hamburger variant="3dx" label="3D X" />
<x-atlas::hamburger variant="3dy" label="3D Y" />
<x-atlas::hamburger variant="3dxy" label="3D XY" />
<x-atlas::hamburger variant="arrowalt" label="Arrow alt" />
Preview follows the site's light/dark mode. Open standalone →

Every variant

Seventeen animations ship, and most have a reversed twin that plays the same motion in the opposite direction. boring, minus and squeeze are symmetrical and have none.

Variant Reversed
3dx3dx-r
3dy3dy-r
3dxy3dxy-r
arrowarrow-r
arrowaltarrowalt-r
arrowturnarrowturn-r
boring—
collapsecollapse-r
elasticelastic-r
emphaticemphatic-r
minus—
sliderslider-r
spinspin-r
springspring-r
squeeze—
standstand-r
vortexvortex-r
 
<x-atlas::hamburger variant="collapse" label="Collapse" />
<x-atlas::hamburger variant="collapse-r" label="Collapse reversed" />
<x-atlas::hamburger variant="spin" label="Spin" />
<x-atlas::hamburger variant="spin-r" label="Spin reversed" />
<x-atlas::hamburger variant="slider" label="Slider" />
<x-atlas::hamburger variant="slider-r" label="Slider reversed" />
Preview follows the site's light/dark mode. Open standalone →

Binding the open state

The wrapper opens its own Alpine scope with x-data="{ open: false }" and publishes it with x-modelable="open". Put x-model on the tag and that value becomes two-way bound to a property in your own scope, so the panel, the overlay and the button all read one boolean — and setting it from outside closes the button's animation too.

  • Work
  • Services
  • Contact 
<div x-data="{ open: false }">
    <x-atlas::hamburger x-model="open" variant="spin" label="Navigation" />

    <div x-show="open">
        <x-atlas::list>
            <x-atlas::list.item>Work</x-atlas::list.item>
            <x-atlas::list.item>Services</x-atlas::list.item>
            <x-atlas::list.item>Contact</x-atlas::list.item>
        </x-atlas::list>
    </div>
</div>
Preview follows the site's light/dark mode. Open standalone →
Without x-model the button still works, but its state stays private: nothing else on the page can see whether the menu is open. Bind it as soon as anything other than the bars has to react.

Accessible name

The button contains only decorative spans, so label is its entire accessible name. aria-expanded is kept in step with the open state automatically, so the label should name the thing being opened and leave the state to ARIA. 

<x-atlas::hamburger label="Main navigation" />
<x-atlas::hamburger label="Filters" variant="minus" />
<x-atlas::hamburger label="Account menu" variant="squeeze" />
Preview follows the site's light/dark mode. Open standalone →
Atlas styles the bars through .atlas-hamburger, so a hamburger placed outside that wrapper — or with the class overwritten — falls back to the hamburgers.css defaults and loses the Atlas colors and sizing.

Tabs

Panels that share one region, switched by a list of tabs. State lives in Alpine on the root and is matched by value.

Accordion

Stacked sections that expand and collapse, animated with Alpine's x-collapse plugin.

Reference

<x-atlas::hamburger>

  • Name
    variant
    Type
    string
    Default
    default: collapse
    Description
    Which hamburgers.css animation to use. See the full list below; an empty string renders the bars with no animation.
  • Name
    label
    Type
    string
    Default
    default: Menu
    Description
    Accessible name, set as aria-label on the button.
  • Name
    type
    Type
    button | submit | reset
    Default
    default: button
    Description
    Type attribute of the button element.