Sidebars
Navigation and content sidebars for application layouts.
Basic Sidebar
Simple navigation sidebar with links.
Main content area
HTML
<div style="display: flex; flex-wrap: wrap; gap: 24px">
<aside
class="ss-c-sidebar"
aria-label="Basic sidebar"
style="
display: flex;
flex-direction: column;
width: 250px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
padding: 20px;
flex-shrink: 0;
"
>
<div
class="ss-c-sidebar__header"
style="
padding-bottom: 16px;
border-bottom: 1px solid var(--ss-color-border);
margin-bottom: 16px;
"
>
<h3 style="margin: 0; font-size: 16px; font-weight: 600">
Navigation
</h3>
</div>
<nav class="ss-c-sidebar__nav" aria-label="Basic sidebar navigation">
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
"
>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
text-decoration: none;
"
>
Dashboard
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
Projects
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
Messages
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
Settings
</a>
</li>
</ul>
</nav>
</aside>
<div
style="
flex: 1 1 240px;
padding: 20px;
background: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
"
>
<p style="margin: 0; opacity: 0.6">Main content area</p>
</div>
</div>Sidebar with Icons
Navigation links with icon indicators.
HTML
<aside
class="ss-c-sidebar"
aria-label="Sidebar with icons"
style="
display: flex;
flex-direction: column;
width: 280px;
background: #1a1a2e;
color: white;
border-radius: var(--ss-radius-lg);
padding: 20px;
"
>
<div
class="ss-c-sidebar__brand"
style="
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 16px;
"
>
<div
style="
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
"
>
<span aria-hidden="true">◐</span>
</div>
<span style="font-size: 18px; font-weight: 700">
Stylescape
</span>
</div>
<nav aria-label="Main navigation">
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
"
>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: white;
"
>
<span aria-hidden="true">⌂</span>
Dashboard
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
"
>
<span aria-hidden="true">▤</span>
Projects
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
"
>
<span aria-hidden="true">☺</span>
Team
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
"
>
<span aria-hidden="true">▦</span>
Analytics
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
"
>
<span aria-hidden="true">⚙</span>
Settings
</a>
</li>
</ul>
</nav>
<div
style="
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
"
>
<div style="display: flex; align-items: center; gap: 12px">
<div
style="
width: 36px;
height: 36px;
background: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
"
>
JD
</div>
<div style="flex: 1">
<div style="font-size: 14px; font-weight: 500">
John Doe
</div>
<div style="font-size: 12px; color: rgba(255, 255, 255, 0.7)">
john@email.com
</div>
</div>
</div>
</div>
</aside>Collapsible Sidebar
Sidebar with expandable sections.
HTML
<aside
class="ss-c-sidebar"
aria-label="Collapsible sidebar"
style="
display: flex;
flex-direction: column;
width: 280px;
background: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
padding: 16px;
"
>
<nav aria-label="Collapsible navigation">
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
"
>
<!-- Section: Main -->
<li>
<details open>
<summary
style="
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ss-color-text-muted);
"
>
Main
<span aria-hidden="true">▼</span>
</summary>
<ul
style="
list-style: none;
padding: 4px 0 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
"
>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
background: var(
--ss-color-accent
);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-md);
text-decoration: none;
"
>
Dashboard
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
Analytics
</a>
</li>
</ul>
</details>
</li>
<!-- Section: Projects -->
<li>
<details>
<summary
style="
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ss-color-text-muted);
"
>
Projects
<span aria-hidden="true">▶</span>
</summary>
<ul
style="
list-style: none;
padding: 4px 0 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
"
>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
All Projects
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
Active
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
Archived
</a>
</li>
</ul>
</details>
</li>
<!-- Section: Settings -->
<li>
<details>
<summary
style="
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ss-color-text-muted);
"
>
Settings
<span aria-hidden="true">▶</span>
</summary>
<ul
style="
list-style: none;
padding: 4px 0 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
"
>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
Account
</a>
</li>
<li>
<a
href="#"
style="
display: block;
padding: 10px 12px;
border-radius: var(--ss-radius-md);
text-decoration: none;
color: inherit;
"
>
Preferences
</a>
</li>
</ul>
</details>
</li>
</ul>
</nav>
</aside>Mini Sidebar (Icon Only)
Compact icon-only sidebar for maximized content area.
HTML
<aside
class="ss-c-sidebar ss-c-sidebar--mini"
aria-label="Mini sidebar"
style="
display: flex;
flex-direction: column;
width: 64px;
background: #1a1a2e;
border-radius: var(--ss-radius-lg);
padding: 12px;
"
>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
"
>
<div
style="
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
margin-bottom: 16px;
"
>
<span aria-hidden="true">◐</span>
</div>
<a
href="#"
aria-label="Home"
style="
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">⌂</span>
</a>
<a
href="#"
aria-label="Projects"
style="
width: 40px;
height: 40px;
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">▤</span>
</a>
<a
href="#"
aria-label="Team"
style="
width: 40px;
height: 40px;
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">☺</span>
</a>
<a
href="#"
aria-label="Analytics"
style="
width: 40px;
height: 40px;
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">▦</span>
</a>
<div style="flex: 1; min-height: 40px"></div>
<a
href="#"
aria-label="Settings"
style="
width: 40px;
height: 40px;
border-radius: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">⚙</span>
</a>
<div
style="
width: 36px;
height: 36px;
background: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
font-weight: 600;
"
>
JD
</div>
</div>
</aside>Sidebar with Badges
Navigation items with notification badges.
HTML
<aside
class="ss-c-sidebar"
aria-label="Sidebar with badges"
style="
display: flex;
flex-direction: column;
width: 260px;
background: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
padding: 16px;
"
>
<nav aria-label="Mailbox navigation">
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
"
>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
text-decoration: none;
"
>
<span aria-hidden="true">⇩</span>
<span style="flex: 1">Inbox</span>
<span
style="
background: var(--ss-color-on-accent);
color: var(--ss-color-accent);
padding: 2px 8px;
border-radius: var(--ss-radius-lg);
font-size: 12px;
font-weight: 600;
"
>
24
</span>
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
<span aria-hidden="true">⭐</span>
<span style="flex: 1">Starred</span>
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
<span aria-hidden="true">⇧</span>
<span style="flex: 1">Sent</span>
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
<span aria-hidden="true">✎</span>
<span style="flex: 1">Drafts</span>
<span
style="
background: var(--ss-color-warning);
color: var(--ss-color-on-warning);
padding: 2px 8px;
border-radius: var(--ss-radius-lg);
font-size: 12px;
font-weight: 600;
"
>
3
</span>
</a>
</li>
<li>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: inherit;
"
>
<span aria-hidden="true">␡</span>
<span style="flex: 1">Trash</span>
</a>
</li>
</ul>
</nav>
</aside>Content Sidebar (Right)
Right-side content sidebar for supplementary information.
Article Title
Main content area with the primary article or page content. The sidebar provides supplementary information and navigation.
HTML
<div style="display: flex; flex-wrap: wrap; gap: 24px">
<div
style="
flex: 1 1 240px;
padding: 20px;
background: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
"
>
<h3 style="margin: 0 0 12px">Article Title</h3>
<p style="margin: 0; color: var(--ss-color-text-muted); line-height: 1.6">
Main content area with the primary article or page content.
The sidebar provides supplementary information and
navigation.
</p>
</div>
<aside
class="ss-c-sidebar ss-c-sidebar--content"
aria-label="Content sidebar"
style="
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
"
>
<div
style="
padding: 20px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
margin-bottom: 16px;
"
>
<h3
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ss-color-text-muted);
"
>
On This Page
</h3>
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
"
>
<li>
<a
href="#"
style="
color: var(--ss-color-link);
font-weight: 600;
text-decoration: none;
"
>
Introduction
</a>
</li>
<li>
<a
href="#"
style="
color: var(--ss-color-text-muted);
text-decoration: none;
"
>
Getting Started
</a>
</li>
<li>
<a
href="#"
style="
color: var(--ss-color-text-muted);
text-decoration: none;
"
>
Configuration
</a>
</li>
<li>
<a
href="#"
style="
color: var(--ss-color-text-muted);
text-decoration: none;
"
>
API Reference
</a>
</li>
</ul>
</div>
<div
style="
padding: 20px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<h3
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ss-color-text-muted);
"
>
Related
</h3>
<ul
style="
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
"
>
<li>
<a
href="#"
style="
color: var(--ss-color-text-muted);
text-decoration: none;
"
>
Similar Article 1
</a>
</li>
<li>
<a
href="#"
style="
color: var(--ss-color-text-muted);
text-decoration: none;
"
>
Similar Article 2
</a>
</li>
</ul>
</div>
</aside>
</div>