Just a simple dropdown menu that I am using in my project. I wanted to share it with you all because a lot of dropdown examples I searched for had some small issues.
I am using framer-motion library for the animations and it is a NextJS project. I am also using Tailwind for the styles. You can of course remove these, but since it's a famous stack to work with I decided to share the whole code as it is.
Feel free to copy and paste into your own projects!
Let's start with the imports:
import { useState } from "react"; import { motion } from "framer-motion"; import Link from "next/link"; Just copy and paste the following code and everything works fine!
const Dropdown = () => { const [shown, setShown] = useState(false); const showMenu = { enter: { opacity: 1, y: 0, display: "block", }, exit: { y: -5, opacity: 0, transition: { duration: 0.3, }, transitionEnd: { display: "none", }, }, }; return ( <motion.div onHoverStart={() => setShown(true)} onHoverEnd={() => setShown(false)} > <span className="cursor-pointer">Sections</span> <motion.ul variants={showMenu} initial="exit" animate={shown ? "enter" : "exit"} className="absolute bg-white mt-1 border border-blue-strong border-opacity-50 rounded-sm p-2" > <Link href="/introduction"> <motion.li whileHover={{ color: "#FFB703", x: 2, }} className="cursor-pointer p-1 text-blue-primary" > Introduction </motion.li> </Link> <Link href="/html"> <motion.li whileHover={{ color: "#FFB703", x: 2, }} className="cursor-pointer p-1 text-blue-primary" > HTML </motion.li> </Link> <motion.li whileHover={{ color: "#FFB703", x: 2, }} className="cursor-pointer p-1 text-blue-primary" > CSS </motion.li> <motion.li whileHover={{ color: "#FFB703", x: 2, }} className="cursor-pointer p-1 text-blue-primary" > JAVASCRIPT </motion.li> </motion.ul> </motion.div> ); }; If you'd like take a look at my website:
Or hit the follow on twitter:
Top comments (0)