Sidebardemo

Before

You must create page layout for using sidebar

    <div class="page [secondary] with-sidebar">
        <div class="page-header" />

        <div class="page-sidebar" />

        <div class="page-region" />
    </div>

Sidebar

For define sidebar you must use <ul />

    <div class="page-sidebar">
        <ul>
            <li><a>Item</a></li>
            ...
            <li><a>Item</a></li>
        </ul>
    </div>

Icons

You can use icon-* class to add icon on the menu item

    <div class="page-sidebar">
        <ul>
            <li><a><i class="icon-cube"></i>Item</a></li>
            ...
        </ul>
    </div>

Colored stickers

You can create colored stickers for sidebar menu items. To create sticker, add class sticker for menu item.

    <div class="page-sidebar">
        <ul>
            <li class="sticker"><a>Item</a></li>
            ...
        </ul>
    </div>

To color sticker you can use colors classes with prefix sticker-. For Example: sticker-color-blue

    <div class="page-sidebar">
        <ul>
            <li class="sticker sticker-color-blue"><a>Item</a></li>
            ...
        </ul>
    </div>

Second level menu

You can create the second level menu in sidebar.

    <div class="page-sidebar">
        <ul>
            <li>
                <a>Item</a>
                <ul class="sub-menu">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>

Second level Dropdown menu

Also you can create second level dropdown menu.

    <div class="page-sidebar">
        <ul>
            <li data-role="dropdown">
                <a>Item</a>
                <ul class="sub-menu sidebar-dropdown-menu">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>

To use dropdown menu you must add dropdown.js in head of you page.

Lighting second level menu

You can lighting second level menu with subclass light.

    <div class="page-sidebar">
        <ul>
            <li>
                <a>Item</a>
                <ul class="sub-menu light">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>