Left Sidebar

This sidebar (panel) is located on the left side. To close, click on the button below, swipe to close or click off the panel.

Right Sidebar

This sidebar (panel) is located on the left side. To close, click on the button below, swipe to close or click off the panel.

Now you can put any HTML element in sidebars. It's super easy!

Now you can put any HTML element in sidebars. It's super easy!

sidebar

Sidebars

Sidebars

You can have as many sidebars on one page as you want. Left or right

CSS3 Transitions

There are 3 transitions types ready for you. Use one of these 3 attributes:

You can also specify location of sidebar:

Where do I put sidebar markup?

In between <div data-role="page"> and <div data-role="header"> like so:

<div data-role="page">

    <!-- SIDEBAR start -->
    <div data-role="panel" id="sidebar">
        <!-- panel content -->
    </div>
    <!-- SIDEBAR end -->
    
    <!-- header -->
    <!-- content -->
    <!-- footer -->

</div> <!-- page end-->

How do I open sidebar?

Use anchor tag with panel (sidebar) ID.

<a href='#panel1'>Open sidebar</a>

How do I close sidebar?

Use anchor tag with target ID and data-rel attribute.

<a href='#panel1' data-rel="close">Close sidebar</a>

How do I close sidebar from inside?

Use anchor tag with only data-rel attribute. Use only inside sidebar.

<a data-rel="close">Close sidebar</a>

Sidebar Examples

Left, right sidebars with different transitions and different content.

Left sidebar

Right sidebar

Left sidebar with navigation

Right sidebar with navigation

NIGHTLY 2014. All rights reserved.