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 the GitHub registry (Recommended)

shadcn can install DropDrawer straight from the GitHub repository, with no registry server or JSON URL required:

Using the hosted registry URL

You can also install from the hosted registry JSON:

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>
  );
}