Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Burger
Breadcrumb

A navigation aid that shows the user's path within a website or application, improving user experience.

Button

A versatile UI component that executes an action when clicked, fully customizable in terms of appearance and behavior.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Burger

A hamburger menu component that is typically used for mobile or collapsed navigation. It toggles the visibility of a menu.

Usage

Basic usage example to quickly see how the Burger works.

"use client";
import { useState } from "react";
import { Burger } from "@/ui/burger";
import { useDisclosure } from "@/hooks/use-disclosure";

function BurgerDemo() {
  const [opened, { toggle }] = useDisclosure();
  return <Burger open={opened} onClick={toggle} />;
}

Properties

Interactive configurator to explore customization options for the Burger component.

Size
Color
"use client";
import { useState } from "react";
import { Burger } from "@/ui/burger";

function BurgerConfiguratorDemo() {
  const [open, setOpen] = useState(false);
  return <Burger open={open} onOpenChange={setOpen} className="border" />;
}

API References

Styles API

Styles APITypeDefaultAnnotation
unstyled?booleanfalseif true, all default styles will be removed
size?string | number32Controls burger width and height, numbers are converted to rem
color?Colorshsl(var(--color))

Props API

Props APITypeDefaultAnnotation
onOpenChange?(open: SetStateAction<boolean>) => voidundefinedSet state of the burger
open?booleanfalseState of the burger, when true burger is transformed

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

burger.tsx