Side Drawer
A minimal bar whose menu slides in from the side.
Features
- Logo plus Menu button at every width
- Side drawer slides in over a blurred page
- Big numbered links that rise in one by one
- Escape or a click outside closes it
Best for: Minimal sites and portfolios that keep the bar clean on every screen size.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Side Drawer navbar free to use?
Yes. Side Drawer is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Side Drawer work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Side Drawer in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Side Drawer need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Side Drawer accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.