Tailwind CSS Drawer - React

Use our Tailwind CSS drawer for side menus in your website.

See below our simple Drawer example that you can use in your Tailwind CSS and React project.


Material Tailwind

Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.

Drawer Placement

You can change the position of the Drawer component using the placement prop.

Drawer on Top
Drawer on Right
Drawer on Bottom
Drawer on Left

Drawer with Navigation

Use this beautiful and versatile example to display navigation options in a hidden panel that can be accessed by clicking a button. These components are usually used in various apps and systems.

Side Menu

Drawer with Form

Similar to the previous example, this drawer will display a form instead of displaying navigation options.

Contact Us

Drawer Props

The following props are available for drawer component. These are the custom props that we've added for the drawer component and you can use all the other native props as well.Navigation

AttributeTypeDescriptionDefault
openbooleanSets the open and close state of drawerNo default value it's a required prop.
sizenumberSet's the width/height of the drawer depending on the drawer placement250
placementPlacementSets the drawer placementleft
overlaybooleanSets the overlay visibility for the drawertrue
overlayRefOverlay RefAdd reference for the drawer overlayundefined
overlayPropsOverlay PropsSets the rest props for the drawer overlayundefined
dismissdismissChange dismiss listeners for drawerundefined
onClosefunctionSets the callback function for closing the drawerundefined
transitionFramer MotionSets the transition for drawertransition: { type: "tween", duration: 0.5 }
classNamestringAdd custom className for drawer''
childrennodeAdd content for drawerNo default value it's a required prop.


For TypeScript Only

import type { DrawerProps } from "@material-tailwind/react";

Types - Placement

export type placement = "top" | "right" | "bottom" | "left";

Types - Overlay Reference

export type overlayRef = React.Ref<HTMLDivElement>;

Types - Overlay Props

export type overlayProps = React.ComponentProps<"div">;

Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: "pointerdown" | "mousedown" | "click";
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: "pointerdown" | "mousedown" | "click";
  ancestorScroll?: boolean;
  bubbles?:
    | boolean
    | {
        escapeKey?: boolean;
        outsidePress?: boolean;
      };
};

Drawer Theme

Learn how to customize the theme and styles for drawer component, the theme object for drawer component has two main objects:

A. The defaultProps object for setting up the default value for props of drawer component.
B. The styles object for customizing the theme and styles of drawer component.

You can customize the theme and styles of drawer component by adding Tailwind CSS classes as key paired values for objects.



Drawer Theme Object Type

interface DrawerStylesType {
  defaultProps: {
    size: number;
    overlay: boolean;
    placement: "top" | "right" | "bottom" | "left";
    overlayProps: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
    className: string;
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    onClose: () => void;
    transition: object;
  };
  styles: {
    base: {
      container: object;
      overlay: object;
      drawer: object;
    };
  };
}


For TypeScript Only

import { DrawerStylesType } from "@material-tailwind/react";

Drawer Theme Customization

const theme = {
  drawer: {
    defaultProps: {
      size: 300,
      overlay: true,
      placement: "left",
      overlayProps: undefined,
      className: "",
      dismiss: undefined,
      onClose: undefined,
      transition: {
        type: "tween",
        duration: 0.3,
      },
    },
    styles: {
      base: {
        drawer: {
          position: "fixed",
          zIndex: "z-[9999]",
          pointerEvents: "pointer-events-auto",
          backgroundColor: "bg-white",
          boxSizing: "box-border",
          width: "w-full",
          boxShadow: "shadow-2xl shadow-blue-gray-900/10",
        },
        overlay: {
          position: "absolute",
          inset: "inset-0",
          width: "w-full",
          height: "h-full",
          pointerEvents: "pointer-events-auto",
          zIndex: "z-[9995]",
          backgroundColor: "bg-black",
          backgroundOpacity: "bg-opacity-60",
          backdropBlur: "backdrop-blur-sm",
        },
      },
    },
  },
};

dialog

icon button

Edit this page on Github