"use client" import React, { useRef, useState } from "react" import { motion, AnimatePresence, Variants } from "motion/react" import Link from "next/link" import { cn } from "@/lib/utils" import { MenuIcon, X } from "lucide-react" const heightVariants: Variants = { initial: { height: 0 }, enter: (i: number) => ({ height: "100%", transition: { duration: 0.5, delay: 0.05 * i, ease: [0.33, 1, 0.68, 1] } }), exit: (i: number) => ({ height: 0, transition: { duration: 0.3, delay: 0.05 * i, ease: [0.33, 1, 0.68, 1] } }), } const backgroundVariants: Variants = { initial: { opacity: 0 }, enter: { opacity: 0.5, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, exit: { opacity: 0, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, } const opacityVariants: Variants = { initial: { opacity: 0 }, enter: (i: number) => ({ opacity: 1, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1], delay: i } }), exit: { opacity: 0, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, } const slideLeftVariants: Variants = { initial: { x: 150 }, enter: { x: 0, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, exit: { x: 150, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, } const rotateXVariants: Variants = { initial: { rotateX: 90, opacity: 0 }, enter: (i: number) => ({ rotateX: 0, opacity: 1, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1], delay: 0.3 + i * 0.05 } }), exit: { opacity: 0, transition: { duration: 0.5, ease: [0.33, 1, 0.68, 1] } }, } const mountAnim = { initial: "initial", animate: "enter", exit: "exit" } as const type MenuItem = { title: string; description: string; href?: string } function LinkRow({ data, index }: { data: MenuItem; index: number }) { const outerRef = useRef(null) const innerRef = useRef(null) const onEnter = (e: React.MouseEvent) => { const target = e.currentTarget const bounds = target.getBoundingClientRect() const fromTop = e.clientY < bounds.top + bounds.height / 2 if (outerRef.current && innerRef.current) { outerRef.current.style.top = fromTop ? "-100%" : "100%" innerRef.current.style.top = fromTop ? "100%" : "-100%" requestAnimationFrame(() => { if (!outerRef.current || !innerRef.current) return outerRef.current.style.transition = "top 300ms cubic-bezier(0.33,1,0.68,1)" innerRef.current.style.transition = "top 300ms cubic-bezier(0.33,1,0.68,1)" outerRef.current.style.top = "0%" innerRef.current.style.top = "0%" }) } } const onLeave = (e: React.MouseEvent) => { const target = e.currentTarget const bounds = target.getBoundingClientRect() const fromTop = e.clientY < bounds.top + bounds.height / 2 if (outerRef.current && innerRef.current) { outerRef.current.style.transition = "top 300ms cubic-bezier(0.33,1,0.68,1)" innerRef.current.style.transition = "top 300ms cubic-bezier(0.33,1,0.68,1)" outerRef.current.style.top = fromTop ? "-100%" : "100%" innerRef.current.style.top = fromTop ? "100%" : "-100%" } } return ( {data.title}

{[...Array(2)].map((_, i) => (

{data.description}

))}

) } export interface SlidingStairsMenuItem { title: string description: string href?: string } export interface SlidingStairsMenuProps { items: SlidingStairsMenuItem[] className?: string trigger?: React.ReactNode | ((api: { open: () => void }) => React.ReactNode) triggerClassName?: string burgerClassName?: string stairsClassName?: string stairsBackdropClassName?: string overlayRowClassName?: string closeButtonClassName?: string } export function SlidingStairsMenu({ items, className, trigger, triggerClassName, burgerClassName, stairsClassName, stairsBackdropClassName, overlayRowClassName, closeButtonClassName, }: SlidingStairsMenuProps) { const [menuIsOpen, setMenuIsOpen] = useState(false) const open = () => setMenuIsOpen(true) const renderTrigger = () => { if (typeof trigger === "function") return trigger({ open }) if (trigger) return (

{trigger}

) return (

) } return (

{renderTrigger()} {menuIsOpen && ( <> {/* Stairs overlay, themable via class props */} {[...Array(5)].map((_, index) => ( ))} {/* Menu overlay, accepts custom items */}

setMenuIsOpen(false)} aria-label="Close menu" className={cn( "p-3 rounded-full border hover:bg-foreground hover:text-background transition-colors", closeButtonClassName, )} >

{items.map((el, i) => ( ))}

)}

) } export default SlidingStairsMenu

Command Palette

Sliding Stairs Menu

Installation

Install Dependencies

Copy and Paste the component

Unlock with PRO

Usage

Props