Components / Foundations

Hamburger

Component

Animated hamburger menu icon that toggles to an X. Supports customizable colors, stroke width, state binding, and callbacks.

Preview

Usage

API reference

Live preview

Interactive example

Navigation toggle

Menu closed

A compact menu control that responds to its current state.

Usage

Import the component, then make it your own.

ComponentHamburger

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Hamburger } from "sveltekit-ui"

  let is_open = $state(false)
</script>

<Hamburger val={is_open} on_change={(value) => { is_open = value }} />
{#if is_open}
  <nav aria-label="Example menu"><a href="#overview">Overview</a></nav>
{/if}
<section id="overview"><h2>Overview</h2><p>Toggle the menu above.</p></section>

API reference

Props accepted by the component.

6 entries in properties

Property	Type	Default	Description
`val`	`boolean`	`false`	Represents the current state of the hamburger icon. `false` for hamburger, `true` for X.
`is_bind_val`	`boolean`	`false`	If `true`, the component manages its own `val` state internally. If `false`, the state is controlled externally.
`color_base`	`CSS color`	`var(--g14-t)`	Base color of the hamburger lines.
`color_hover`	`CSS color`	`var(--primary-t)`	Color of the hamburger lines when hovered.
`sw`	`number`	`30`	Stroke width of the hamburger lines.
`on_change`	`function`	`null`	Callback function triggered when the hamburger icon is toggled. Receives the new `val` state as an argument.