Rail
Side panel and rail navigation components.
Basic Rail Navigation
HTML
<div
style="
display: flex;
flex-wrap: wrap;
gap: 0;
min-height: 350px;
border-radius: var(--ss-radius-lg);
overflow: hidden;
border: 1px solid var(--ss-color-border);
"
>
<nav
class="ss-c-rail"
aria-label="Rail navigation"
style="
width: 72px;
flex: 0 0 72px;
background: var(--ss-color-surface-alt);
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
gap: 8px;
"
>
<a
href="#"
class="ss-c-rail--item active"
style="
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
border-radius: var(--ss-radius-lg);
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
text-decoration: none;
width: 56px;
"
>
<span aria-hidden="true" style="font-size: 20px">⌂</span>
<span style="font-size: 10px; margin-top: 4px">Home</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
width: 56px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 20px">⌕</span>
<span style="font-size: 10px; margin-top: 4px">
Search
</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
width: 56px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 20px">▦</span>
<span style="font-size: 10px; margin-top: 4px">Stats</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
width: 56px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 20px">⚙</span>
<span style="font-size: 10px; margin-top: 4px">
Settings
</span>
</a>
</nav>
<div style="flex: 1 1 200px; padding: 24px; background: var(--ss-color-surface)">
<h3 style="margin: 0 0 12px">Main Content Area</h3>
<p style="margin: 0; color: var(--ss-color-text-muted)">
This is where your main content would appear alongside the
navigation rail.
</p>
</div>
</div>Extended Rail with Labels
HTML
<div
style="
display: flex;
flex-wrap: wrap;
gap: 0;
min-height: 350px;
border-radius: var(--ss-radius-lg);
overflow: hidden;
border: 1px solid var(--ss-color-border);
"
>
<nav
class="ss-c-rail ss-c-rail--extended"
aria-label="Extended rail navigation"
style="
width: 240px;
flex: 0 0 240px;
background: var(--ss-color-surface-alt);
padding: 20px 12px;
"
>
<div
style="
padding: 0 12px 20px;
border-bottom: 1px solid var(--ss-color-border);
margin-bottom: 16px;
"
>
<h3 style="margin: 0; font-size: 18px">Dashboard</h3>
</div>
<a
href="#"
class="ss-c-rail--item active"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ss-radius-lg);
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
text-decoration: none;
margin-bottom: 4px;
"
>
<span aria-hidden="true" style="font-size: 18px">⌂</span>
<span>Home</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
margin-bottom: 4px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 18px">▤</span>
<span>Projects</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
margin-bottom: 4px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 18px">☺</span>
<span>Team</span>
</a>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
margin-bottom: 4px;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 18px">▦</span>
<span>Calendar</span>
</a>
<div
style="
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--ss-color-border);
"
>
<a
href="#"
class="ss-c-rail--item"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ss-radius-lg);
text-decoration: none;
color: var(--ss-color-text);
"
>
<span aria-hidden="true" style="font-size: 18px">⚙</span>
<span>Settings</span>
</a>
</div>
</nav>
<div style="flex: 1 1 200px; padding: 24px; background: var(--ss-color-surface)">
<h3 style="margin: 0 0 12px">Extended Rail Content</h3>
<p style="margin: 0; color: var(--ss-color-text-muted)">
Extended rail provides more space for labels and additional
navigation items.
</p>
</div>
</div>Collapsible Rail
HTML
<div style="display: flex; flex-direction: column; gap: 16px">
<!-- Collapsed State -->
<div
style="
display: flex;
flex-wrap: wrap;
gap: 0;
min-height: 200px;
border-radius: var(--ss-radius-lg);
overflow: hidden;
border: 1px solid var(--ss-color-border);
"
>
<nav
class="ss-c-rail ss-c-rail--collapsed"
aria-label="Collapsed rail navigation"
style="
width: 64px;
flex: 0 0 64px;
background: #1a1a2e;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
gap: 4px;
"
>
<button
type="button"
aria-label="Expand navigation"
style="
width: 44px;
height: 44px;
border: none;
background: transparent;
color: white;
cursor: pointer;
border-radius: var(--ss-radius-lg);
font-size: 20px;
"
>
☰
</button>
<div
style="
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 12px;
"
>
<a
href="#"
aria-label="Home"
style="
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
"
>
<span aria-hidden="true">⌂</span>
</a>
<a
href="#"
aria-label="Analytics"
style="
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
opacity: 0.6;
"
>
<span aria-hidden="true">▦</span>
</a>
<a
href="#"
aria-label="Notifications"
style="
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
opacity: 0.6;
"
>
<span aria-hidden="true">♪</span>
</a>
</div>
</nav>
<div style="flex: 1 1 200px; padding: 20px; background: var(--ss-color-surface)">
<span
style="
font-size: 12px;
color: var(--ss-color-text-muted);
text-transform: uppercase;
"
>
Collapsed State
</span>
</div>
</div>
<!-- Expanded State -->
<div
style="
display: flex;
flex-wrap: wrap;
gap: 0;
min-height: 200px;
border-radius: var(--ss-radius-lg);
overflow: hidden;
border: 1px solid var(--ss-color-border);
"
>
<nav
class="ss-c-rail ss-c-rail--expanded"
aria-label="Expanded rail navigation"
style="
width: 220px;
flex: 0 0 220px;
background: #1a1a2e;
padding: 16px;
color: white;
"
>
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
"
>
<span style="font-weight: 600">Navigation</span>
<button
type="button"
aria-label="Collapse navigation"
style="
width: 32px;
height: 32px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
border-radius: var(--ss-radius-md);
"
>
✕
</button>
</div>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
margin-bottom: 8px;
"
>
<span aria-hidden="true">⌂</span>
Home
</a>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
opacity: 0.7;
margin-bottom: 8px;
"
>
<span aria-hidden="true">▦</span>
Analytics
</a>
<a
href="#"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--ss-radius-lg);
color: white;
text-decoration: none;
opacity: 0.7;
"
>
<span aria-hidden="true">♪</span>
Notifications
</a>
</nav>
<div style="flex: 1 1 200px; padding: 20px; background: var(--ss-color-surface)">
<span
style="
font-size: 12px;
color: var(--ss-color-text-muted);
text-transform: uppercase;
"
>
Expanded State
</span>
</div>
</div>
</div>Right Side Rail
HTML
<div
style="
display: flex;
flex-wrap: wrap;
gap: 0;
min-height: 300px;
border-radius: var(--ss-radius-lg);
overflow: hidden;
border: 1px solid var(--ss-color-border);
"
>
<div style="flex: 1 1 200px; padding: 24px; background: var(--ss-color-surface)">
<h3 style="margin: 0 0 16px">Document Content</h3>
<p style="margin: 0 0 12px; color: var(--ss-color-text-muted); line-height: 1.6">
This is the main content area. The right rail can be used
for contextual information, tools, or secondary navigation.
</p>
<p style="margin: 0; color: var(--ss-color-text-muted); line-height: 1.6">
Right rails are particularly useful for properties panels,
comments, or related content.
</p>
</div>
<aside
class="ss-c-rail ss-c-rail--right"
aria-label="Properties"
style="
width: 280px;
flex: 0 0 280px;
background: var(--ss-color-surface-alt);
padding: 20px;
border-left: 1px solid var(--ss-color-border);
"
>
<h3
style="
margin: 0 0 16px;
font-size: 14px;
text-transform: uppercase;
color: var(--ss-color-text-muted);
"
>
Properties
</h3>
<div style="display: flex; flex-direction: column; gap: 16px">
<div>
<label
for="rail-status"
style="
display: block;
font-size: 12px;
color: var(--ss-color-text-muted);
margin-bottom: 6px;
"
>
Status
</label>
<select
id="rail-status"
style="
width: 100%;
padding: 8px;
background: var(--ss-color-surface);
color: var(--ss-color-text);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-md);
"
>
<option>Draft</option>
<option>Published</option>
</select>
</div>
<div>
<span
style="
display: block;
font-size: 12px;
color: var(--ss-color-text-muted);
margin-bottom: 6px;
"
>
Author
</span>
<div
style="
display: flex;
align-items: center;
gap: 8px;
"
>
<div
style="
width: 28px;
height: 28px;
background: var(--ss-color-accent);
border-radius: 50%;
"
></div>
<span style="font-size: 14px">Jane Doe</span>
</div>
</div>
<div>
<span
style="
display: block;
font-size: 12px;
color: var(--ss-color-text-muted);
margin-bottom: 6px;
"
>
Last Modified
</span>
<span style="font-size: 14px">Today at 2:34 PM</span>
</div>
</div>
</aside>
</div>