SideMenu Component

The SideMenu component creates smooth sliding panels that appear from either side of your screen. It’s perfect for mobile navigation, filters, or any secondary content that shouldn’t take up permanent screen space.

Key Features

• Smooth Animations: Polished sliding transitions with backdrop blur

• Touch Support: Mobile-friendly interactions

• Accessibility: Full keyboard and screen reader support

Basic Usage

Add a SideMenu with a trigger button:

1
<button id="menu-trigger">Open Menu</button>
2
<SideMenu side="left" triggerQuery="#menu-trigger">
3
    <nav class="flex flex-col gap-4">
4
        <a href="/home">Home</a>
5
        <a href="/about">About</a>
6
        <a href="/contact">Contact</a>
7
    </nav>
8
</SideMenu>

Close menu

In some cases you may want to close the menu when a button is clicked. By default the menu will not close when a button is clicked. You can do this by adding the data-close-side-menu attribute to the button.

SideMenu Functions API

Methods

1
const menu = await ready(document.querySelector('side-menu'));
2

3
menu.toggle(true); // Show menu
4

5
menu.toggle(false); // Hide menu
6

7
menu.toggle(); // Toggle menu

Events

1
// Listen for menu open
2
menu.addEventListener(SideMenuEventNames.Open, (event) => {
3
  const { id } = event.detail;
4
  console.log('Menu opened:', id);
5
});
6

7
// Listen for menu close
8

9
menu.addEventListener(SideMenuEventNames.Close, (event) => {
10
  const { id } = event.detail;
11
  console.log('Menu closed:', id);
12
});

Side Menu Component Props API