LIB/UI
Alert Avatar AvatarGroup Button ButtonGroup Checkbox CheckboxGroup FilePicker Form FormRow Hamburger Input Modal Option Radio RadioGroup Rating Select Spinner Textarea Toast Tooltip Toggle

Hamburger

Use a hamburger button to toggle a menu or other content. The button can be styled with global classes such as Tailwind utility classes and other configuration options. Bind the active prop to a boolean value to control the button state. Clicking the button will toggle the state of active.

Example

<script>
  import { Hamburger } from '$lib/ui';
  let isMenuOpen = $state(false);
</script>

<Hamburger bind:active={isMenuOpen} />
<p>isMenuOpen: {isMenuOpen}</p>

isMenuOpen: false

Hamburger Component Props

Name Type Default Description
activeBooleanfalseTypically used with bind:active to bind the active state to parent component

Hamburger CSS Custom Properties

Name Type Default Description
--ui-hamburger-widthNumeric30pxOverall width of Hamburger component
--ui-hamburger-heightNumeric--ui-hamburger-width * .75Overall height of Hamburger component
--ui-hamburger-paddingNumeric--ui-hamburger-width * .3Padding and negative margin value (for larger clickable area)
--ui-hamburger-backgroundColortransparentBackground color of Hamburger
--ui-hamburger-borderBorder shorthandnoneCSS shorthand for border width/style/color
--ui-hamburger-border-radiusNumeric--ui-border-radius or 3pxBorder radius Hamburger component
--ui-hamburger-line-colorColor--ui-dark or #222Color of Hamburger lines
--ui-hamburger-line-thicknessNumeric2pxThickness (height) of Hamburger lines
--ui-hamburger-line-radiusNumeric2pxBorder radius of Hamburger lines
--ui-hamburger-spins-numberInteger (odd)5Number of spins on animation. Must be an odd number!
--ui-hamburger-spins-durationTime (s or ms)150msDuration of spin animation