mn-sidenav

Minimalist sidenav component, agnostic to framworks.

See the demo

Install

npm install --save mn-sidenav

And bundle dependencies and main files in dist/ with your preferred tool.

Usage

Use the tag mn-sidenav, with an id and content

<mn-sidenav id="menu">
  <!-- content here -->
</mn-sidenav>

And to other element show this sidenav, just use the attribute open-sidenav with the sidenav id

<button open-sidenav="menu">Show menu</button>

Finally to close sidenav, use the attribute close-sidenav.

<button close-sidenav>Close menu</button>

And if you want add these two options to elements, use the attribute toggle-sidenav

<button toggle-sidenav="menu">Close menu</button>

Javascript

If you want open or close, just use the methods open, close or toggle available on mn-sidenav element, e.g.

const sidenav = document.querySelector('mn-sidenav#menu')
 
sidenav.open() // or sidenav.close(), sidenav.toggle()