🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@material/drawer

Package Overview
Dependencies
Maintainers
15
Versions
1688
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/drawer

The Material Components Web drawer component

14.0.0
latest
Source
npm
Version published
Weekly downloads
457K
-19.48%
Maintainers
15
Weekly downloads
 
Created

What is @material/drawer?

@material/drawer is a Material Design implementation of a drawer component, which is used to create navigational sidebars in web applications. It provides a consistent and customizable way to implement drawers that can be either permanent, dismissible, or modal.

What are @material/drawer's main functionalities?

Permanent Drawer

A permanent drawer is always visible and typically used for navigation in desktop applications. The code sample shows how to initialize a permanent drawer using the @material/drawer package.


import { MDCPermanentDrawer } from '@material/drawer';

const drawer = MDCPermanentDrawer.attachTo(document.querySelector('.mdc-drawer--permanent'));

Dismissible Drawer

A dismissible drawer can be toggled open or closed by the user. This type of drawer is typically used in responsive web applications. The code sample demonstrates how to initialize and toggle a dismissible drawer.


import { MDCDismissibleDrawer } from '@material/drawer';

const drawer = MDCDismissibleDrawer.attachTo(document.querySelector('.mdc-drawer--dismissible'));
const drawerOpenButton = document.querySelector('.drawer-open-button');
drawerOpenButton.addEventListener('click', () => drawer.open = !drawer.open);

Modal Drawer

A modal drawer overlays the content and is typically used for mobile applications. The code sample shows how to initialize and open a modal drawer using the @material/drawer package.


import { MDCModalDrawer } from '@material/drawer';

const drawer = MDCModalDrawer.attachTo(document.querySelector('.mdc-drawer--modal'));
const drawerOpenButton = document.querySelector('.drawer-open-button');
drawerOpenButton.addEventListener('click', () => drawer.open = true);

Other packages similar to @material/drawer

    react-sidebar

    react-sidebar is a library for creating sidebars in React applications. It provides a flexible and customizable way to implement sidebars, but it does not follow Material Design guidelines as strictly as @material/drawer.

    react-burger-menu

    react-burger-menu is another React library for creating off-canvas menus. It offers a variety of animations and styles for the sidebar, making it more versatile in terms of design compared to @material/drawer.

    rc-drawer

    rc-drawer is a drawer component for React that supports both left and right side drawers. It is highly customizable and can be used in various types of web applications, but it does not provide the same level of built-in Material Design styling as @material/drawer.

Keywords

material components
material design
navigation
drawer

FAQs

Package last updated on 28 Apr 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Malicious npm Packages Target React, Vue, and Vite Ecosystems with Destructive Payloads

Research

Security News

Malicious npm Packages Target React, Vue, and Vite Ecosystems with Destructive Payloads

Malicious npm packages targeting React, Vue, Vite, Node.js, and Quill remained undetected for two years while deploying destructive payloads.

By Kush Pandya  -  May 21, 2025