Sidemenu

The Sidemenu component is a side menu component that displays a side menu with customizable colors and styling.

Elixir UI - Sidemenu Component

Usage

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

Add the import statement for the component

import { Sidemenu } from "@/components/elixir-ui/sidemenu";

Add the links and footer links props to the component

const menuLinks = [
  { title: "Projects", href: "#" },
  { title: "Agency", href: "#" },
  { title: "Expertise", href: "#" },
  { title: "Careers", href: "#" },
  { title: "Contact", href: "#" },
]

const footerLinks = [
{ title: "Instagram", href: "#" },
{ title: "LinkedIn", href: "#" },
{ title: "Twitter", href: "#" },
{ title: "Facebook", href: "#" },
]

Import the component in your project and use it

<div className="absolute top-10 right-10 flex justify-end h-full w-full">
  <Sidemenu
    imageSaturation={1.2}
    links={menuLinks}
    footerLinks={footerLinks}
  />
</div>

Props

Prop	Type	Default	Description
cardColor	string	-	The color of the card
cardImageURL	string	-	The URL of the image to be displayed
imageOpacity	number	1	The opacity of the image
imageSaturation	number	1	The saturation of the image
links	{ title: string; href: string }[]	-	The links to be displayed
links.title	string	-	The title of the link
links.href	string	-	The href of the link
footerLinks	{ title: string; href: string }[]	-	The footer links to be displayed
footerLinks.title	string	-	The title of the footer link
footerLinks.href	string	-	The href of the footer link