An animated hamburger menu toggle button with smooth transitions between menu and close icons. Perfect for compact navigation controls in modern web applications.
1"use client";
2
3import { MenuToggle } from "@/components/component-x/menu-toggle";
4import { useState } from "react";
5
6export function MenuTogglePreview() {
7const [isOpen, setIsOpen] = useState(false);
8
9return (
10 <div className="flex flex-col items-center justify-center gap-8 w-full h-full">
11 <div className="flex items-center gap-4">
12 <MenuToggle onOpenChange={setIsOpen} />
13 </div>
14
15 <div className="text-sm text-muted-foreground">
16 {isOpen ? "Menu is open" : "Menu is closed"}
17 </div>
18 </div>
19);
20}
21Run the following command to add the component:
npx cx add menu-toggle1"use client";
2
3import { MenuToggle } from "@/components/component-x/menu-toggle";
4
5export function MenuToggleSizes() {
6return (
7 <div className="flex items-center justify-center gap-8 w-full h-full">
8 <MenuToggle size="sm" />
9 <MenuToggle size="md" />
10 <MenuToggle size="lg" />
11 </div>
12);
13}
14