📅 You're Invited: Meet the Socket team at RSAC (April 28 – May 1).RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@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
0
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

Using Trusted Protocols Against You: Gmail as a C2 Mechanism

Research

Using Trusted Protocols Against You: Gmail as a C2 Mechanism

Socket uncovers malicious packages on PyPI using Gmail's SMTP protocol for command and control (C2) to exfiltrate data and execute commands.

By Olivia Brown  -  Apr 30, 2025
A New Overview in our Dashboard

Product

A New Overview in our Dashboard

We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.

By André Staltz  -  Apr 29, 2025