menu

Animated React component — Menu / MenuIcon

View on Lucide ↗Source ↗

Hover the menu icon above to see the default draw animation.

Import

Tree-shakable named import — only the icons you reference end up in your bundle.

import { Menu } from "lucide-motion";

Also exported as MenuIcon for the Lucide-suffix naming convention.

Quick start

Drop the component into your JSX. The default trigger plays the draw animation on hover.

import { Menu } from "lucide-motion";

<Menu size={32} />
Timing presets · hover to play
Snappy
duration={0.2} stagger={0}
Cinematic
duration={1.5} stagger={0.4}
Linear
easing="linear"
Spinner
trigger="mount" repeat={Infinity}
Tags
barsnavigationhamburgeroptions
Related icons
square-menucircle-ellipsiscolumns-4ellipsis-verticalellipsisgamepad-directionallist-chevrons-down-uplist-chevrons-up-downlist-filter-pluslist-filter

Raw node data

The icon's underlying SVG node tree — useful if you need to render or transform it yourself instead of using the component.

Show IconNode[]
[
  [
    "path",
    {
      "d": "M4 5h16"
    }
  ],
  [
    "path",
    {
      "d": "M4 12h16"
    }
  ],
  [
    "path",
    {
      "d": "M4 19h16"
    }
  ]
]