Table of Contents
Examples
Basic UsageClosing
Right Side Menu
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
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.