Panel System

js-offcanvas Vanilla JS Offcanvas Library Demos

Download This Plugin Back To jQueryScript

Accessible, animated panel drawers that slide in from any edge. Navigate, search, and interact — without leaving the page.

Left Panel

position: left · fadeInLeft

Slide-in navigation drawer from the left edge. Ideal for primary menus, documentation sidebars, or category trees.

Right Panel

position: right · fadeInRight

Search panel with form controls. Perfect for filters, search interfaces, or contextual settings that slide in from the right.

Top Panel

position: top · fadeInDown

Action bar that drops down from the top. Great for toolbars, quick-action menus, or notification panels.

Bottom Panel

position: bottom · fadeInUp

Status bar that rises from the bottom. Use for cookie notices, status messages, or player controls.

Programmatic API

panel.open() · close() · toggle()

Control panels imperatively through JavaScript. Methods are proxied directly onto each panel element.

Left Panel

Event Monitor

init · beforeopen · open · close

All panels dispatch lifecycle events. Open any panel to see events logged here in real time.