SideMenu

Table of Contents

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>

Side Menu 1

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>

Side Menu 2

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>

Side Menu 3

JavaScript Reference

Constructor

Extends Component
new SideMenu()

Requirements

Attributes

opened: boolean

Whether the side menu is opened.

overlayClose: boolean

Whether clicking the overlay closes the side menu.

side: string

The side from which the menu opens. Can be "left" or "right".

Methods

open(): void

Opens the side menu.

close(): void

Closes the side menu.

toggle(): void

Toggles the side menu open or closed.