DropDrawer

A responsive component that automatically switches between a dropdown menu on desktop and a drawer on mobile devices for shadcn/ui.

Example

Jay

just now

Click the menu button to see it in action.

Switch between desktop and mobile view to see the responsive behavior.

Installation

Using shadcn registry (Recommended)

The easiest way to install DropDrawer is through the shadcn registry:

Usage

Migrating from DropdownMenu

DropDrawer is designed as a drop-in replacement for shadcn/ui's DropdownMenu component. Simply replace your imports.

import { DropDrawer, DropDrawerContent, DropDrawerItem, DropDrawerTrigger } from "@/components/ui/dropdrawer";

Basic Example

import {
  DropDrawer,
  DropDrawerContent,
  DropDrawerItem,
  DropDrawerTrigger,
} from "@/components/ui/dropdrawer";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <DropDrawer>
      <DropDrawerTrigger asChild>
        <Button>Open Menu</Button>
      </DropDrawerTrigger>
      <DropDrawerContent>
        <DropDrawerItem>Item 1</DropDrawerItem>
        <DropDrawerItem>Item 2</DropDrawerItem>
        <DropDrawerItem>Item 3</DropDrawerItem>
      </DropDrawerContent>
    </DropDrawer>
  );
}

Nested Submenus

Create complex navigation structures with nested submenus.

import {
  DropDrawer,
  DropDrawerContent,
  DropDrawerItem,
  DropDrawerSub,
  DropDrawerSubContent,
  DropDrawerSubTrigger,
  DropDrawerTrigger,
} from "@/components/ui/dropdrawer";
import { Button } from "@/components/ui/button";

export function NestedExample() {
  return (
    <DropDrawer>
      <DropDrawerTrigger asChild>
        <Button>Open Menu</Button>
      </DropDrawerTrigger>
      <DropDrawerContent>
        <DropDrawerItem>Item 1</DropDrawerItem>
        <DropDrawerSub>
          <DropDrawerSubTrigger>Submenu</DropDrawerSubTrigger>
          <DropDrawerSubContent>
            <DropDrawerItem>Submenu Item 1</DropDrawerItem>
            <DropDrawerItem>Submenu Item 2</DropDrawerItem>
          </DropDrawerSubContent>
        </DropDrawerSub>
        <DropDrawerItem>Item 3</DropDrawerItem>
      </DropDrawerContent>
    </DropDrawer>
  );
}