Motion Slide Menu

Installation

File Structure

Usage

import { Settings, User } from "lucide-react";

import {
  MotionSlideMenu,
  type MotionSlideMenuItem,
} from "@/components/unlumen-ui/motion-slide-menu";

const items: MotionSlideMenuItem[] = [
  {
    id: "profile",
    label: "Profile",
    icon: <User />,
    href: "/profile",
  },
  {
    id: "settings",
    label: "Settings",
    icon: <Settings />,
    children: [
      { id: "usage", label: "Usage", href: "/settings/usage" },
      {
        id: "billing",
        label: "Billing",
        children: [
          {
            id: "manage-plan",
            label: "Manage plan",
            href: "/settings/billing",
          },
        ],
      },
    ],
  },
];

export default function Example() {
  return <MotionSlideMenu items={items} />;
}

API Reference

MotionSlideMenu

MotionSlideMenuItem

Notes

• Items with children can be nested to any depth. Keep every id unique across the complete tree so shared-layout transitions never collide.
• Forward navigation moves the previous content left and introduces the next content from the right with a subtle 8px upward settle, using the same 60% directional slide as Motion Tabs Menu. Back navigation reverses both directions and adds the same subtle vertical travel.
• The selected category keeps the same keyed row as it moves into the header. Its icon crossfades into the back chevron inside a fixed-size slot, preventing label shifts and SVG path interpolation.
• Child rows are indented from the active header to reinforce the current navigation depth.
• Menu controls transition their colors in 75ms. On hover, non-destructive leading icons and chevrons become fully foreground-colored.
• The panel height follows short levels and becomes internally scrollable once it reaches maxHeight.
• Use path with onPathChange to synchronize the active level with a router, URL, or external state. Use defaultPath when the menu should manage itself.
• Arrow keys move between controls, Arrow Right opens a category, and Arrow Left or Escape returns to the previous level. Keyboard navigation moves focus to the new logical target without spatial animation.
• Pointer activation keeps focus on the category as it becomes the header and adds a subtle press response.
• Reduced-motion preferences keep the navigation state changes while removing horizontal and vertical travel.
• springDuration and springBounce configure the duration-based spring. Providing springStiffness, springDamping, or springMass switches to Motion's physical spring model; springEase remains scoped to tweened transitions because physical springs do not use easing curves.

Original idea

Credits

Built by leo.

The animation language is based on Motion Tabs Menu.