Asides
.aside elements are used to house content in the sidebar. It assigns padding, a background color, and rules for text and buttons inside the element.
<div class="u-span-6">
<h5>Content</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra volutpat est a gravida. Donec laoreet mauris a sem finibus, facilisis rutrum nunc efficitur.</p>
<p>Suspendisse vitae lacus diam. Nullam neque lacus, pharetra nec sollicitudin nec, vehicula sed ex. Pellentesque laoreet nec velit ut pharetra. Nunc cursus gravida malesuada.</p>
</div>
<div class="u-span-6">
<aside class="aside">
<h5>Aside</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h5>Heading</h5>
</p>Duis viverra volutpat est a gravida</p>
<hr/>
<p><a href="#" class="button">Sidebar Button</a></p>
<br/>
</aside>
</div>
See a full-page example of sidebars in action on the Basic Page Template.
Sidebar Navigation
Use the .sidebar-nav framework for creating nested menus in sidebars.
<div class="u-span-6">
<aside class="aside">
<nav class="sidebar-nav">
<div class="sidebar-nav__top-page">
<a href="#" class="h5">
<span class="link-text">Current page parent</span>
</a>
<a href="#" class="sidebar-nav-toggle js-slide-toggle" data-target="../.sidebar-nav__menu" data-parent=".sidebar-nav">
<span class="u-display-none">Toggle Sidebar Nav</span>
<span class="icon icon-select-arrows" aria-hidden="true"></span>
</a>
</div>
<ul class="sidebar-nav__menu">
<li class="page_item page_item_has_children">
<a href="#">
<span class="link-text">Dropdown Menu Item</span>
<span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation">
<span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span>
</span>
</a>
<ul class="children">
<li class="page_item"><a href="#"><span class="link-text">Dropdown Item 1</span><span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation"><span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span></span></a></li>
<li class="page_item"><a href="#"><span class="link-text">Dropdown Item 2</span><span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation"><span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span></span></a></li>
<li class="page_item"><a href="#"><span class="link-text">Dropdown Item 3</span><span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation"><span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span></span></a></li>
<li class="page_item"><a href="#"><span class="link-text">Dropdown Item 4</span><span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation"><span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span></span></a></li>
</ul>
</li>
<li class="page_item">
<a href="#">
<span class="link-text">Menu Item</span>
<span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation">
<span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span>
</span>
</a>
</li>
<li class="page_item current_page_item">
<a href="#">
<span class="link-text">Current Page Menu Item</span>
<span class="sidebar-nav__menu-toggle js-slide-toggle" data-target="../.children" role="presentation">
<span class="u-display-none">Toggle Menu</span><span class="icon icon-arrow-down"></span>
</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>