Sidebar navigasi
Untuk lebih dari sepuluh tujuan yang dijelajahi orang sambil tetap di layar yang sama.
Pratinjau langsung
Sumber
<nav class="dc-sb" aria-label="설정 메뉴">
<p class="dc-sb__title" id="dc-sb-h1">계정</p>
<ul class="dc-sb__list" aria-labelledby="dc-sb-h1">
<li><a class="dc-sb__item" href="#" aria-current="page"><span class="dc-sb__icon" aria-hidden="true">●</span><span class="dc-sb__text">프로필</span></a></li>
<li><a class="dc-sb__item" href="#"><span class="dc-sb__icon" aria-hidden="true">◐</span><span class="dc-sb__text">알림</span><span class="dc-sb__badge">3</span></a></li>
<li><a class="dc-sb__item" href="#"><span class="dc-sb__icon" aria-hidden="true">◆</span><span class="dc-sb__text">보안</span></a></li>
</ul>
<details class="dc-sb__group" open>
<summary class="dc-sb__grouphead"><span class="dc-sb__text">결제</span><span class="dc-sb__caret" aria-hidden="true">▾</span></summary>
<ul class="dc-sb__list">
<li><a class="dc-sb__item dc-sb__item--sub" href="#"><span class="dc-sb__text">요금제</span></a></li>
<li><a class="dc-sb__item dc-sb__item--sub" href="#"><span class="dc-sb__text">영수증</span></a></li>
</ul>
</details>
<hr class="dc-sb__sep">
<a class="dc-sb__item dc-sb__item--quiet" href="#"><span class="dc-sb__icon" aria-hidden="true">↪</span><span class="dc-sb__text">로그아웃</span></a>
</nav>.dc-sb {
width: 248px; padding: var(--dc-3);
background: var(--dc-surface);
border-right: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-sb__title {
margin: var(--dc-2) var(--dc-2) var(--dc-1);
color: var(--dc-text-mute); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.dc-sb__list { list-style: none; margin: 0; padding: 0; }
.dc-sb__item {
display: flex; align-items: center; gap: var(--dc-3);
min-height: 40px; padding: 0 var(--dc-2);
border-radius: var(--dc-r-sm);
color: var(--dc-text-sub); text-decoration: none;
font-size: 14px; font-weight: 600;
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-sb__item:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-sb__item[aria-current="page"] {
background: var(--dc-brand-soft); color: var(--dc-brand-text); font-weight: 700;
}
.dc-sb__icon { flex: 0 0 18px; width: 18px; text-align: center; font-size: 13px; }
.dc-sb__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-sb__badge {
flex: 0 0 auto; min-width: 20px; padding: 0 6px;
border-radius: var(--dc-r-full);
background: var(--dc-danger-soft); color: var(--dc-danger);
font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}
.dc-sb__group { margin-top: var(--dc-2); }
.dc-sb__grouphead {
display: flex; align-items: center; justify-content: space-between;
min-height: 40px; padding: 0 var(--dc-2);
border-radius: var(--dc-r-sm);
color: var(--dc-text); font-size: 14px; font-weight: 700;
cursor: pointer; list-style: none;
}
.dc-sb__grouphead::-webkit-details-marker { display: none; }
.dc-sb__grouphead:hover { background: var(--dc-sunken); }
.dc-sb__caret { color: var(--dc-text-sub); font-size: 11px; transition: transform var(--dc-fast); }
.dc-sb__group[open] .dc-sb__caret { transform: rotate(180deg); }
.dc-sb__item--sub { padding-left: var(--dc-6); font-weight: 600; }
.dc-sb__item--quiet { color: var(--dc-text-mute); }
.dc-sb__sep { height: 1px; margin: var(--dc-3) 0; border: 0; background: var(--dc-line); }
.dc-sb--rail {
display: flex; flex-direction: column; align-items: center; gap: var(--dc-1);
width: 76px; padding: var(--dc-2);
}
.dc-sb__item--rail {
justify-content: center; width: 44px; height: 44px; min-height: 44px;
padding: 0; gap: 0; font-size: 15px;
}
.dc-sb-shell {
display: flex; align-items: stretch;
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-bg); overflow: hidden;
}
.dc-sb-shell__main { flex: 1 1 auto; min-width: 0; padding: var(--dc-5); }
.dc-sb-shell__h { margin: 0 0 var(--dc-2); color: var(--dc-text); font-size: 16px; font-weight: 700; }
.dc-sb-shell__p { margin: 0; color: var(--dc-text-sub); font-size: 14px; line-height: 1.65; }
@media (max-width: 700px) {
.dc-sb-shell { flex-direction: column; }
.dc-sb-shell .dc-sb { width: 100%; border-right: 0; border-bottom: 1px solid var(--dc-line); }
}Cara memakainya
- Lebih dari tiga grup, beri judul seksi dan jaga tiap grup maksimal lima item
- Tandai item aktif dengan aria-current="page" plus latar, bukan hanya warna teks
- Buat grup lipat dengan details agar bekerja tanpa skrip
Hal yang perlu diwaspadai
- Pada rail ikon saja, selalu simpan label di span dc-sr; ikon sendiri tak terbaca
- Di bawah 1024px ubah sidebar jadi drawer; memaksa dua kolom merusak keduanya