SideMenu

The SideMenu component is a compact and interactive sidebar menu, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Installation

Follow the steps below to add the Liquid Frame Component to your project.

Run the following command in the terminal.

npx shadcn add https://elixir-ui-xi.vercel.app/registry/sidemenu.json

Usage

Follow the steps below to add the SideMenu Component to your project.

Import the component

import SideMenu from "@/components/sidemenu";

Add the component to your project

interface LinkProps {
    title: string;
    href: string;
    image?: string;
}

const Links: LinkProps[] = [
    { title: "Projects", href: "/" },
    { title: "Agency", href: "/" },
    { title: "Expertise", href: "/" },
    { title: "Careers", href: "/" },
    { title: "Contact", href: "/" },
];

const FooterLinks: LinkProps[] = [
    { title: "Instagram", href: "/" },
    { title: "LinkedIn", href: "/" },
    { title: "Twitter", href: "/" },
    { title: "Facebook", href: "/" },
];

export default function SidemenuPage() {
    return (
        <div>
            <SideMenu 
            cardImage="/image.jpg" 
            footerLinks={FooterLinks} 
            links={Links} 
            imageOpacity={0.5} 
            imageSaturation={0.8}
            />
        </div>
    )
}