Drawer

Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

Temporary (Left)

Open Left Drawer

Temporary (Right)

Open Right Drawer

Filters

Temporary (Bottom)

Open Bottom Drawer

Options

Get Link

Edit

Delete

<me-button id="open-drawer">Open Drawer</me-button> <me-drawer id="my-drawer" anchor="left"> <div style="padding:16px;min-width:250px">  </div> </me-drawer> <script> const drawer = document.getElementById('my-drawer'); document.getElementById('open-drawer').addEventListener('click', () => { drawer.open = true; }); drawer.addEventListener('me-close', () => { drawer.open = false; }); </script>

API

Attribute	Type	Default	Description
`open`	boolean	false	Whether the drawer is open.
`anchor`	left \| right \| top \| bottom	left	Side the drawer opens from.
`variant`	temporary \| persistent \| permanent	temporary	Drawer behavior variant.

Events

Event	Detail	Description
`me-close`	`{ reason }`	Fired when backdrop is clicked or Escape is pressed.