# Simple Navbar with Dropdown

> A modern, fully-customizable React navigation bar with smooth dropdown animations and seamless dark mode support. Features include animated dropdowns with perspective effects, glass morphism for sticky headers, and mobile responsiveness. Built with TypeScript and Tailwind CSS, it includes a custom button component and supports dynamic theme switching. Perfect for modern web applications requiring a sleek, professional navigation experience.  Key features in bullet points:  🎨 Light/Dark mode with smooth transitions 📱 Responsive design with mobile menu 🔄 Animated dropdowns with 3D effects 💎 Glass morphism support for sticky headers 🎯 TypeScript & Tailwind CSS 🔧 Highly customizable (colors, animations, layout) 📦 Zero external dependencies (includes custom button)

- Author: [Holetarget](https://21st.dev/@holetarget)
- Library: Holetarget
- License: mit
- Tags: Navbar, Navigation Menu
- npm dependencies: clsx
- Live preview: https://21st.dev/@holetarget/components/21st-navbar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/holetarget/21st-navbar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/navbar.md