List with sidebar layout
To integrate the sidebar properly in a list layout, the sidebar markup has to be placed as a sibling to the main element, and apply an additional sm to their parent content-area container.
Example use cases
- Filterable list content, eg product lists
Code output
Open layout in new windowHTML markup
The code snippet below contains only the content segment of the layout, excluding the header and footer segments.
<!-- HEADER SEGMENT -->Copy<div class="content">
<div class="content-item content-item-has-sidebar">
<div class="content-overflown">
<div class="container">
<div class="breadcrumbs-row">
<ol class="breadcrumbs">
<li><a href="#" class="simple-link">Home</a></li>
<li>Sample Path</li>
</ol>
<a class="btn btn-main">New item</a>
</div>
<div class="search-group">
<input placeholder="Search list items" class="form-control-lg" type="search">
<button type="submit"><i class="sky-icon-search"></i></button>
</div>
<div class="sidebar">
<div class="filters-box toggle">
<button class="btn btn-main btn-toggle" data-toggle="toggle">Filter items</button>
<div class="toggle-content">
<div class="pad-sm">
<h4>Filter items</h4>
<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Filter category</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group1" value="option1" checked="" type="radio">
<span>View all <small><strong>(10)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option2" type="radio">
<span>Option 1 <small><strong>(2)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option3" type="radio">
<span>Option 2 <small><strong>(3)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option4" type="radio">
<span>Option 3 <small><strong>(4)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group1" value="option5" type="radio">
<span>Option 4 <small><strong>(1)</strong></small></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Filter category 2</button>
<div class="toggle-content">
<ul class="list-filters">
<li>
<label class="custom-radio">
<input name="group2" value="option1" checked="" type="radio">
<span>View all <small><strong>(10)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option2" type="radio">
<span><i class="color-square color-scale-1"></i>Option 1 <small><strong>(4)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option3" type="radio">
<span><i class="color-square color-scale-3"></i>Option 2 <small><strong>(1)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option4" type="radio">
<span><i class="color-square color-scale-5"></i>Option 3 <small><strong>(2)</strong></small></span>
</label>
</li>
<li>
<label class="custom-radio">
<input name="group2" value="option5" type="radio">
<span><i class="color-square color-scale-7"></i>Option 4 <small><strong>(3)</strong></small></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filters-item-toggle toggle">
<button class="btn-toggle" data-toggle="toggle">Filter category 3</button>
<div class="toggle-content">
<select>
<option>Select option</option>
<option>...</option>
<option>Option (2)</option>
<option>...</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between my-1">
<span><strong>01</strong> Result(s)</span>
<div class="dropdown">
<button class="btn btn-sec btn-dropdown-toggle" data-toggle="dropdown">Sorting options</button>
<ul class="dropdown-menu dropdown-right">
<li><a href="#">Option 1 Asc</a></li>
<li><a href="#">Option 1 Desc</a></li>
<li><a href="#">Option 2 Asc</a></li>
<li><a href="#">Option 2 Desc</a></li>
</ul>
</div>
</div>
<div class="list-item-group">
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-1"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-1"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-1"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-1"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-3"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-5"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-5"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-7"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-7"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
<div class="list-item">
<div class="list-item-desc">
<a href=# class="list-item-content-link"></a>
<h4><i class="color-square color-scale-7"></i>Item <strong>Name</strong> - <small>Submitted on Feb 02 2017, 12:30</small></h4>
<p><small>Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong>, Attribute: <strong>Value</strong></small></p>
</div>
<div class="list-item-actions">
<a href=# class="btn btn-sm">View</a>
<a href=# class="btn btn-sm">Edit</a>
</div>
</div>
</div>
<div class="pagination">
<div class="btn-group">
<a href="#" class="btn btn-sm btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
<a href="#" class="btn btn-sm btn-sec active">1</a>
<a href="#" class="btn btn-sm btn-sec">2</a>
<a href="#" class="btn btn-sm btn-sec btn-next"><i class="sky-icon-next"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SEGMENT -->