5.8 Sidebar

A page with a sidebar that usually contains filtering or search options. Requires the following markup:

  • sidebar-wrapper (wrapping div)
    • sidebar-toggle - Button to toggle the visibility of the sidebar on mobile. Requires data-sidebar-toggle attribute.
    • sidebar - The sidebar itself. Requires data-sidebar attribute.
    • sidebar-content - The content that appears next to the sidebar. Requires data-sidebar-content attribute.

Also requires some JavaScript support (found in the source of this page)

List of example pages

Manage products you sell

350 products in total.

<h2> Manage products you sell</h2>
<p><span class="badge">350</span> products in total.</p>

<nav class="navigation">
    <ul class="navigation__nav">
        <li><a href="#0" class="button"><span class="fa fa-download"></span> Import</a></li>
        <li><a href="#0" class="button"><span class="fa fa-external-link"></span> Export</a></li>
    </ul>
    <ul class="navigation__nav">
        <li><a href="#0" class="button button--primary"><span class="fa fa-plus"></span> Add a new product</a></li>
    </ul>
</nav>

<div class="sidebar-wrapper">
    <nav class="sidebar" data-sidebar>
        <h3 class="card-heading">Filter products</h3>
        <div class="card-body">
            <form action="javascript:void(0);">
                <label for="sku">SKU</label>
                <input id="sku" name="sku" type="text" value="">
                <label for="tax_class">Tax Class</label>
                <select id="tax_class" name="tax_class"><option selected="" value="">All</option><option value="20">20% Standard Tax</option><option value="5">5% Reduced Tax</option><option value="10">Tax Exempt</option><option value="0">Zero Rated Tax</option></select>
                <label for="title">Title</label>
               <input id="title" name="title" type="text" value="">
               <label for="sort">Sort By</label>
                <select id="sort" name="sort"><option selected="" value="">Default</option><option value="DMD">Date Modified - Most Recent First</option><option value="PRICEA">Price - Low to High</option><option value="PRICED">Price - High to Low</option></select>
                <label for="customer">Customer</label>
                <select id="customer" name="customer"><option selected="" value="">Please select…</option><option value="anglo-american-educational-services-ltd">Terry's Educational Services Ltd</option><option value="elevated-perspective-marketing-llc">Perspective Marketing</option><option value="flr-procurement">Barry's Pickles</option><option value="gareth">Gareth</option></select>
                <input type="checkbox" name="awaiting-approval" id="awaiting-approval">
                <label for="awaiting-approval">Awaiting approval</label>
                <button type="submit" class="button button--primary button--block" name="filter">
                    <span class="fa fa-search"></span> Filter Products
                </button>
            </form>
        </div>
    </nav>
    <button class="button button--secondary sidebar-toggle" data-sidebar-toggle>Filter products <span class="fa fa-search"></span></button>
    <div class="sidebar-content" data-sidebar-content>
        <nav class="pagination">
            <p class="pagination__label">Showing 50 to 100 of 350 results</p>
            <ul class="pagination__list">
                <li class="pagination__previous">
                    <a href="#0" rel="prev">Previous</a>
                </li>
                <li>
                    <a href="#0">1</a>
                </li>
                <li class="pagination__active">
                    2
                </li>
                <li>
                    <a href="#0">3</a>
                </li>
                <li>
                    <a href="#0">4</a>
                </li>
                <li class="pagination__divider">
                    &hellip;
                </li>
                <li>
                    <a href="#0">7</a>
                </li>
                <li class="pagination__next">
                    <a href="#0" rel="next">Next</a>
                </li>
            </ul>
        </nav>

        <ul class="product-list">
            <li class="product">
                <div class="product__details">
                    <h3 class="product__name">It's a great product. (1kg)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>TRZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W12-JC</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Beverage</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <p class="product__price">10.99 USD</p>
                    <div class="button-group">
                        <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                        <a href="#0" class="button"><span class="fa fa-plus"></span> Enable</a>
                        <a href="#0" class="button">Edit</a>
                    </div>
                </div>
            </li>
            <li class="product product--disabled">
                <div class="product__details">
                    <h3 class="product__name">[DISABLED] Some of the finest wine available to mankind (24 x 330ml)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>TRZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W12-JC</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Beverage</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <p class="product__price">10.99 USD</p>
                    <div class="button-group">
                        <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                        <a href="#0" class="button"><span class="fa fa-plus"></span> Enable</a>
                        <a href="#0" class="button">Edit</a>
                    </div>
                </div>
            </li>
            <li class="product">
                <div class="product__details">
                    <h3 class="product__name">Cheap wine (12 x 330ml)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>TRZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W12-JC</dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <p class="product__price">5.99 USD</p>
                    <div class="button-group">
                        <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                        <a href="#0" class="button"><span class="fa fa-ban"></span> Disable</a>
                        <a href="#0" class="button">Edit</a>
                    </div>
                </div>
            </li>
            <li class="product">
                <div class="product__details">
                    <img src="https://placeimg.com/80/80/people/grayscale" class="product__image">
                    <h3 class="product__name">Strong foil (1 x 50g)</h3>
                    <dl class="product__info">
                        <dt>Your SKU</dt>
                        <dd>TRZ-142</dd>
                    </dl>
                    <dl class="product__info">
                        <dt>Supplier SKU</dt>
                        <dd>W12-JC</dd>
                    </dl>
                    <dl class="product__tags">
                        <dt>Tags</dt>
                        <dd><span class="badge">Beverage</span> <span class="badge">Tag</span> <span class="badge">Something</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
                    </dl>
                </div>
                <div class="product__actions">
                    <p class="product__price">18.99 USD</p>
                    <div class="button-group">
                        <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                        <a href="#0" class="button"><span class="fa fa-plus"></span> Enable</a>
                        <a href="#0" class="button">Edit</a>
                    </div>
                </div>
            </li>
        </ul>

        <nav class="pagination">
            <p class="pagination__label">Showing 50 to 100 of 350 results</p>
            <ul class="pagination__list">
                <li class="pagination__previous">
                    <a href="#0" rel="prev">Previous</a>
                </li>
                <li>
                    <a href="#0">1</a>
                </li>
                <li class="pagination__active">
                    2
                </li>
                <li>
                    <a href="#0">3</a>
                </li>
                <li>
                    <a href="#0">4</a>
                </li>
                <li class="pagination__divider">
                    &hellip;
                </li>
                <li>
                    <a href="#0">7</a>
                </li>
                <li class="pagination__next">
                    <a href="#0" rel="next">Next</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script>
    // Sidebar js
    $(document).ready(function(){
        var $sidebar = $('[data-sidebar]');
        var $sidebarButton = $('[data-sidebar-toggle]');
        var $sidebarContent = $('[data-sidebar-content]');

        var sidebar = {
            toggle: function() {
                if ($('body').hasClass('modal-open')) {
                    sidebar.close();
                } else {
                    sidebar.open();
                }
            },

            open: function() {
                $sidebar.addClass('is-open');
                $('body').addClass('modal-open');
                $('body').append('<div class="sidebar-backdrop"></div>')
                $sidebarButton.html('Close filters <span class="fa fa-times"></span>');
            },

            close: function() {
                $sidebar.removeClass('is-open');
                $('body').removeClass('modal-open');
                $('.sidebar-backdrop').remove();
                $sidebarButton.html('Filter products <span class="fa fa-search"></span>');
            },

            affix: function() {
                if ($sidebarContent.innerHeight() > $sidebar.innerHeight()) {
                    $sidebar.affix({
                        offset: {
                            top: $sidebar.offset().top
                        }
                    })
                }
            },

            reset: function() {
                if ($(document).width() > 767) {
                    sidebar.close();
                    sidebar.affix();
                }
            }
        }

        // Sidebar button click event
        $sidebarButton.click(function() {
            sidebar.toggle();
        });

        // Reset sidebar when sizing back to desktop with a timeout
        $(window).resize(function() {
            clearTimeout(sidebar.reset);
            resizeTimer = setTimeout(sidebar.reset, 250);
        });

        // Initialise
        sidebar.reset();
    });
</script>