HeroUI Drawer

Navigation 7

About

HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Drawer to your project and fits it to your theme.

Code

How HeroUI Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import type { ComponentType, SVGProps } from "react"

import { Bell, Home, Mail, Menu, Search, Settings, User } from "lucide-react"
import { Button } from "@heroui/react"
import { Drawer } from "@/components/ui/heroui-drawer"

export default function Navigation() {
  const navItems: { icon: ComponentType<SVGProps<SVGSVGElement>>; label: string }[] = [
    { icon: Home, label: "Home" },
    { icon: Search, label: "Search" },
    { icon: Bell, label: "Notifications" },
    { icon: Mail, label: "Messages" },
    { icon: User, label: "Profile" },
    { icon: Settings, label: "Settings" },
  ]

  return (
    <Drawer>
      <Button variant="secondary">
        <Menu />
        Menu
      </Button>
      <Drawer.Backdrop>
        <Drawer.Content placement="left">
          <Drawer.Dialog>
            <Drawer.CloseTrigger />
            <Drawer.Header>
              <Drawer.Heading>Navigation</Drawer.Heading>
            </Drawer.Header>
            <Drawer.Body>
              <nav className="flex flex-col gap-1">
                {navItems.map((item) => (
                  <button
                    key={item.label}
                    className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-foreground transition-colors hover:bg-default"
                    type="button"
                  >
                    <item.icon className="size-5 text-muted-foreground" />
                    {item.label}
                  </button>
                ))}
              </nav>
            </Drawer.Body>
          </Drawer.Dialog>
        </Drawer.Content>
      </Drawer.Backdrop>
    </Drawer>
  )
}