---
title: "JavaScript Menu"
description: "jSuites Menu is a lightweight JavaScript plugin for building responsive navigation menus with collapsible folders, automatic URL-based selection, and mobile-friendly slide-out sidebar functionality."
source: https://jsuites.net/docs/menu
---
The jSuites Menu is a lightweight JavaScript plugin for building responsive sidebar navigation menus. It features collapsible folders, automatic URL-based selection, smooth animations, and transforms into a mobile-friendly slide-out panel on smaller screens. It works seamlessly with React, Angular, Vue, or vanilla JavaScript.
## Documentation
### Methods
| Method | Description |
|---------------------------------|----------------------------------------------------------------------|
| show() | Display the menu (with slide animation on mobile) |
| hide() | Hide the menu (with slide animation on mobile) |
| toggle() | Toggle menu visibility |
| load() | Load the menu and apply initial selection based on current URL |
| update(adjustScroll?: boolean) | Update the selected state based on the current URL path |
| select(element, event) | Programmatically select a menu item |
### Events
| Event | Description |
|-----------|------------------------------------------------------------------------------------------------------|
| onclick | Fired when a menu link is clicked. `onclick(instance: Object, event: MouseEvent) => void` |
| onload | Fired when the menu finishes initializing. `onload(element: HTMLElement, instance: Object) => void` |
### Initialization Properties
| Property | Description |
|-------------------------|----------------------------------------------------------|
| adjustOnLoad: boolean | Auto-scroll to selected item when menu loads. Default: true |
### CSS Classes
| Class | Description |
|----------------|--------------------------------------------------|
| .jmenu | Main menu container (added automatically) |
| .jmenu-logo | Logo image, visible only on mobile |
| .jmenu-icon | Menu toggle button (hamburger icon) |
| .folder | Collapsible section header |
| .selected | Applied to active folder and list item |
### CSS Custom Properties
| Property | Description |
|-----------------------|---------------------------------------|
| --main-color | Accent color for selected item border |
| --main-color-light | Background color for selected item |
## Examples
### Basic Navigation Menu
Create a simple sidebar navigation with collapsible folders and automatic URL-based selection.
```html
```
### Nested Menu Structure
Create a menu with subsections using `h3` headings for additional grouping.
```html
```
```jsx
import { useRef, useEffect } from 'react';
import menu from '@jsuites/menu';
import '@jsuites/menu/menu.css';
function App() {
const containerRef = useRef(null);
useEffect(() => {
if (containerRef.current) {
menu(containerRef.current, {
adjustOnLoad: true
});
}
}, []);
return (
);
}
export default App;
```
```vue
```
### Update Selection on Route Change
When using client-side routing, update the menu selection when the URL changes.
```html
```
```jsx
import { useRef, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import menu from '@jsuites/menu';
import '@jsuites/menu/menu.css';
function App() {
const menuRef = useRef(null);
const containerRef = useRef(null);
const location = useLocation();
useEffect(() => {
if (containerRef.current) {
menuRef.current = menu(containerRef.current, {
adjustOnLoad: true
});
}
}, []);
// Update selection when route changes
useEffect(() => {
menuRef.current?.update(true);
}, [location]);
return (
);
}
export default App;
```
```vue
```
## Responsive Behavior
The menu automatically adapts for different screen sizes:
- **Desktop (>800px)**: Static sidebar, folders expand/collapse in place
- **Mobile (<800px)**:
- Full-height slide-out panel with fixed positioning
- Logo becomes visible (`.jmenu-logo`)
- Close button appears in top-right corner
- Clicking a link automatically closes the menu
## HTML Structure
The menu expects the following HTML structure:
{.ignore}
```html
```
## Related Tools
- [JavaScript Context Menu](/docs/contextmenu) - Right-click context menus for actions and options
