Menu Toggle Icon

Buttons 708

About

Animated menu toggle icon morphing smoothly between hamburger and close states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Menu Toggle Icon to your project and fits it to your theme.

Code

How Menu Toggle Icon is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { MenuToggleIcon } from "@/components/ui/menu-toggle-icon";

export default function DemoOne() {

  const [open, setOpen] = React.useState(false);

	return (
		<button onClick={() => setOpen(!open)}>
			<MenuToggleIcon open={open} className="size-20" duration={500} />
		</button>
	);
}