SideMenu

Basic Usage

Side Menus are closed by default, to open them call the open() method.

<k-side-menu id="sm1">
  <p>Side Menu 1</p>
</k-side-menu>
<button id="open-sm1">Open Side Menu 1</button>
<script>
  document.getElementById('open-sm1').addEventListener('click',()=>{
    document.getElementById('sm1').open();
  });
</script>

Closing

By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the overlay-close="false" attribute/value to disable this.

Use the close() method to close the Side Menu, alternately you can use the toggle() method which can be used to open or close the Side Menu.

<k-side-menu id="sm2" overlay-close="false">
  <p>Side Menu 2</p>
  <button id="close-sm2">Close</button>
</k-side-menu>
<button id="open-sm2">Open Side Menu 2</button>
<script>
  const $sm2 = document.getElementById('sm2');
  document.getElementById('open-sm2').addEventListener('click',()=>{
    $sm2.open();
  });
  document.getElementById('close-sm2').addEventListener('click',()=>{
    $sm2.close();
  });
</script>

Right Side Menu

Give the menu the side="right" attribute/value to make it open from the right side.

<k-side-menu id="sm3" side="right">
  <p>Side Menu 3</p>
</k-side-menu>
<button id="open-sm3">Open Side Menu 3</button>
<script>
  document.getElementById('open-sm3').addEventListener('click',()=>{
    document.getElementById('sm3').open();
  });
</script>

JavaScript Reference

Constructor

Extends ShadowComponent

new SideMenu()

Requirements

• ShadowComponent
• FocusCapture
• CSS: Add html { scrollbar-gutter: stable; } to your global styles to prevent layout shifts when the menu disables scrolling.

Properties

opened: boolean

Whether the side menu is opened. Defaults to false. Syncs to opened attribute.

overlayClose: boolean

Whether clicking the overlay closes the side menu. Defaults to true. Syncs to overlay-close attribute.

side: string

The side from which the menu opens. Can be "left" or "right". Defaults to "left". Syncs to side attribute.

Events

open

Dispatched when the side menu is opened.

close

Dispatched when the side menu is closed.

change

Dispatched when the side menu state changes. Event detail contains "open" or "close".

toggle

Dispatched when the toggle method is called.

Methods

open(): void

Opens the side menu.

close(): void

Closes the side menu.

toggle(): void

Toggles the side menu open or closed and dispatches a toggle event.