Side Panel

The side panel is an off canvas drawer that slides in from the left or right. It is ideal for a secondary menu, quick contact form, or a promo block. You toggle it with any element carrying the .side-panel-trigger class.

Structure

Add #side-panel as a direct child of the page wrapper, with a #side-panel-trigger-close close button and a .side-panel-wrap scroll container that holds one or more .widget blocks. The panel side and push behaviour are set by body classes.

<div id="side-panel" class="dark">

    <div id="side-panel-trigger-close" class="side-panel-trigger">
        <a href="#"><i class="bi-x-lg"></i></a>
    </div>

    <div class="side-panel-wrap">

        <div class="widget">
            <h4>Pages</h4>
            <nav class="nav-tree mb-0">
                <ul>
                    <li><a href="#"><i class="bi-lightning-fill"></i>Features</a></li>
                    <li><a href="#">Widgets</a></li>
                </ul>
            </nav>
        </div>

    </div>
</div>

Trigger

Any element with .side-panel-trigger opens and closes the panel. It can be a header icon, a button, or a link.

<!-- As a header icon -->
<div class="side-panel-trigger header-misc-icon">
    <a href="#"><i class="bi-envelope"></i></a>
</div>

<!-- As a button -->
<a href="#" class="button button-xlarge button-rounded side-panel-trigger mb-5">Open Panel</a>

Body classes

The panel behaviour is driven by classes on the <body> tag.

Push style panel (page content shifts when the panel opens). This is the default side panel example:

<body class="stretched side-push-panel">

Left panel, overlay style (panel slides over the content from the left):

<body class="stretched side-panel-left">

Left panel, push style (combine the left and push classes):

<body class="stretched side-panel-left side-push-panel">

Right panel, overlay style. The default position is right, so no side class is needed:

<body class="stretched">

When the panel is open the script adds .side-panel-open to the body, which you can hook into for custom styling.

Options

#side-panel: the drawer container. Add .dark for a dark scheme, or an inline style for a custom background.
#side-panel-trigger-close: a .side-panel-trigger styled as a close button inside the panel.
.side-panel-wrap: the inner scroll area that holds .widget blocks.
.side-panel-trigger: put on any element to toggle the panel.
body.side-push-panel: content shifts (push) when the panel opens.
body.side-panel-left: positions the panel on the left. Omit for the default right position.
body.side-panel-open: added automatically while the panel is visible.

Tips

Place #side-panel as a top level element inside the page wrapper, not nested inside #content.
You can combine .side-panel-left with .side-push-panel for a left push drawer.
Any number of .side-panel-trigger elements can control the same panel, so a header icon and an in page button can both open it.
Fill the panel with standard .widget blocks: menus, a quick contact form, app download links, and so on.

Usage

<div class="body-overlay"></div>

<div id="side-panel" class="dark">

	<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="icon-line-cross"></i></a></div>

	<div class="side-panel-wrap">

		... Your Content

	</div>

</div>

Code Snippets

Side Panel Position

The off-canvas side panel opens from the left by default. Control which side it appears on with a body class. The panel markup itself stays the same.

<body class="stretched side-panel-left">

<!-- Trigger anywhere in the page -->
<a href="#" class="side-panel-trigger"><i class="bi-list"></i></a>

<!-- The panel -->
<div id="side-panel" class="dark">
    <div class="side-panel-wrap">
        <div class="widget">
            <!-- panel content: menu, widgets, contact info -->
        </div>
    </div>
</div>

Position options (set on <body>):

side-panel-left opens the panel from the left edge (default).
side-panel-right opens it from the right edge.

Notes:

Every element with class side-panel-trigger toggles the panel open/closed; a .side-panel-trigger placed inside the panel acts as a close button.
The sidepanel.js module adds side-panel-open to <body> while open, manages focus trapping, and closes on Escape or an outside click.
Pair the position with a reveal style (side-push-panel) to change how the page reacts, covered in the Side Panel Reveal Style snippet.

Side Panel Reveal Style

Two reveal styles decide how the page behaves when the side panel opens: overlay (panel floats over the content) or push (panel shoves the content aside). Both are set with body classes.

Overlay (default, panel slides over the page):

<body class="stretched side-panel-left">

Push (page content is pushed to make room):

<body class="stretched side-panel-left side-push-panel">

Notes:

Add side-push-panel for the push effect; omit it for the overlay effect.
Combine the reveal style with the position class: side-panel-right side-push-panel pushes from the right, side-panel-left alone overlays from the left, and so on.
On touch devices in push mode, sidepanel.js adds ohidden to <body> while the panel is open to lock background scrolling.
The trigger, focus handling, Escape-to-close and outside-click-to-close behaviour are identical for both reveal styles.

Was this page helpful?