I built a dependency-free sidebar with drag-and-drop and magnetic snapping , in vanilla JS

Most sidebar components pull in a framework, a build step, or at least a CSS library. ac_sidebar doesn't. It's a single JavaScript class, no npm, no bundler, no external dependency, with its own CSS and SVG icon set baked in.

What it does

Two menu levels (menu / submenu), recursive structure
Role-based filtering (1 to 5, lower means more privileges), with menus auto-hiding when they end up empty
Five positions: left, right, top, bottom, or free. In free mode, you can drag the sidebar anywhere, with automatic magnetic snapping to screen edges
Collapses to an icon rail, or hides behind a single burger button
Counter badges per entry, multiple instances on the same page, state persisted via localStorage (optional)

Usage

javascript
const sb = new AcSidebar('#my-sidebar', { /* config */ });

Or load config from an external JSON file:

javascript
const sb = await AcSidebar.fromJson('#my-sidebar', '/config/sidebar.json');

A config example

One thing to flag: the config keys and values are in French (the class was originally built for French-speaking clients), so you'll see things like position: "gauche" (left) or theme: "clair" (light) rather than English terms.

json
{
"position": "gauche",
"theme": "clair",
"masquable": true,
"menu": [
{ "libelle": "Dashboard", "icone": "grille", "lien": "/dashboard" },
{
"libelle": "Users",
"icone": "groupe",
"role": 2,
"sousMenu": [
{ "libelle": "List", "icone": "liste", "lien": "/users" },
{ "libelle": "Roles", "icone": "cle", "lien": "/roles", "role": 1 }
]
}
]
}

Live demo: https://artisan-code.fr/ac_sidebar.php
)
ac_sidebar is part of a small catalog of standalone, dependency-free JS/PHP classes I maintain at artisan-code.fr, built for projects where a full framework would be overkill.