FreeNavigation

User Menu Dropdown

Use this component in app shells, dashboards, admin panels, and authenticated SaaS navigation bars.

ReactTailwind CSSMotionDropdown

Overview

A compact account menu with animated dropdown links.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<UserMenuDropdown />

User Menu Dropdown.tsx

tsx

"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

export function UserMenuDropdown() {
  const [open, setOpen] = useState(true);

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="flex items-center gap-3 rounded-full border border-white/10 bg-zinc-950 px-3 py-2 text-white"
      >
        <span className="h-8 w-8 rounded-full bg-lime-300" />
        <span className="text-sm font-semibold">Aditi</span>
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 8 }}
            className="absolute right-0 top-12 w-48 rounded-xl border border-white/10 bg-zinc-950 p-2 shadow-xl"
          >
            {["Profile", "Billing", "Settings"].map((item) => (
              <button key={item} className="block w-full rounded-lg px-3 py-2 text-left text-sm text-zinc-400 hover:bg-white/[0.06] hover:text-white">
                {item}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}