Sidebar widgets
Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses.
Basic style
Section titled Basic style
In its simplest form, .s-sidebarwidget is comprised of a .s-sidebarwidget--content section and optional .s-sidebarwidget--header and .s-sidebarwidget--footer sections.
Together these classes create a widget with appropriate inner spacing for you to put whatever you want into it.
display: block instead, add the d-block class.
<div class="s-sidebarwidget">
<div class="s-sidebarwidget--header">
<h2>…</h2>
<a class="s-sidebarwidget--action">…</a>
</div>
<div class="s-sidebarwidget--content">
…
<button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
</div>
<div class="s-sidebarwidget--footer">
<button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
</div>
</div>Multiple content items
Section titled Multiple content items
If different sections are required within the body of the sidebar you may use multiple s-sidebarwidget--content elements which will space things appropriately.
<div class="s-sidebarwidget">
<div class="s-sidebarwidget--content">
<img src="…" class="bar-md mr8">
<div class="lh4">
<strong>balpha</strong><br>
contributed 6 edits<br>
joined 8 months ago
</div>
</div>
<div class="s-sidebarwidget--content">
<img src="…" class="bar-md mr8">
<div class="lh4">
<strong>Paweł</strong><br>
contributed 7 edits<br>
joined 1 year 10 months ago
</div>
</div>
<div class="s-sidebarwidget--content">
<img src="…" class="bar-md mr8">
<div class="lh4">
<strong>Aaron Shekey</strong><br>
contributed 3 edits<br>
joined 5 months ago
</div>
</div>
</div>
contributed 6 edits
joined 8 months ago
contributed 7 edits
joined 1 year 10 months ago
contributed 3 edits
joined 5 months ago
Alternative colors
Section titled Alternative colors
Three modifier classes are available for changing the background color of an s-sidebarwidget: s-sidebarwidget__yellow, s-sidebarwidget__blue,
and s-sidebarwidget__green.
<div class="s-sidebarwidget s-sidebarwidget__yellow">…</div>
<div class="s-sidebarwidget s-sidebarwidget__green">…</div>
<div class="s-sidebarwidget s-sidebarwidget__blue">…</div>
Navigation
Section titled NavigationA common use for sidebar widgets is as a navigation block or table of contents, including a highlight of the page/section that the user is currently looking at.
The recommended pattern, as shown in the example below, is to make the s-sidebarwidget a nav element, and for each group of links to create a ul with the class s-sidebarwidget--items, within which each li is of class s-sidebarwidget--item.
The currently active navigation item should have the aria-current attribute set to "page" (if it is a direct link to the very page that the user is looking at) or "true" (in all other cases, e.g. if it is a link to a page that is conceptually a parent or the current page). This aria-current attribute should be placed on the a element.
<nav class="s-sidebarwidget">
<div class="s-sidebarwidget--header">
<h2 class="fs-subheading">
Personal Information
</h2>
</div>
<div class="s-sidebarwidget--content">
<ul class="s-sidebarwidget--items">
<li class="s-sidebarwidget--item">
<a href="…">
Edit Profile
</a>
</li>
<li class="s-sidebarwidget--item">
<a href="…" aria-current="page">
Developer Story Preferences
</a>
</li>
<li class="s-sidebarwidget--item">
<a href="…">
Job Match Preferences
</a>
</li>
</ul>
</div>
<div class="s-sidebarwidget--header">
<h2 class="fs-subheading">
Site Settings
</h2>
</div>
<div class="s-sidebarwidget--content">
<ul class="s-sidebarwidget--items">
<li class="s-sidebarwidget--item">
<a href="…">Preferences</a>
</li>
<li class="s-sidebarwidget--item">
<a href="…">Flair</a>
</li>
</ul>
</div>
</nav>Second-level navigation
Section titled Second-level navigation
If you have a second level of navigation, you can add a ul of class s-sidebarwidget--subnav to the top-level item. Highlighting the currently active navigation is a little more constrained in this case:
If the currently active top-level element has a subnavigation, the top-level aria-current must be on the a, not the li.
The currently active second-level element must have its aria-current on the li, not the a.
<nav class="s-sidebarwidget">
<div class="s-sidebarwidget--content">
<ul class="s-sidebarwidget--items">
<li class="s-sidebarwidget--item">
<a href="…">Asking</a>
</li>
<li class="s-sidebarwidget--item d-block">
<a href="…" aria-current="true">Our model</a>
<ul class="s-sidebarwidget--subnav">
<li>
<a href="…">Be nice</a>
</li>
<li aria-current="page">
<a href="…">What kind of behavior is expected of users?</a>
</li>
<li>
<a href="…">How do I find topics I’m interested in?</a>
</li>
</ul>
</li>
<li class="s-sidebarwidget--item">
<a href="…">Reputation & Moderation</a>
</li>
<li class="s-sidebarwidget--item">
<a href="…">Answering</a>
</li>
</ul>
</div>
</nav>