Topbar
Bilah atas 64px: pencarian, notifikasi, dan menu pengguna. Menempel saat digulir dengan latar tembus pandang.
Topbar lengkap
Di layar kecil kolom pencarian disembunyikan dan diganti tombol menu.
Siti Nurhaliza
Guru
Lihat kode
<header class="ck-topbar" style="position:relative;border-radius:var(--ck-radius-lg);border:1px solid hsl(var(--ck-border))">
<form class="ck-grow" style="max-width:28rem" onsubmit="return false">
<div class="ck-input-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="ck-input" type="search" placeholder="Cari kuis, course, atau soal…"></div>
</form>
<div class="ck-row ck-row-2">
<button class="ck-btn ck-btn--ghost ck-btn--icon" aria-label="Notifikasi" style="position:relative"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="ck-badge ck-badge--destructive" style="position:absolute;top:.25rem;right:.25rem;padding:0 .25rem">2</span></button>
<div class="ck-row ck-row-2" style="padding-left:.5rem;border-left:1px solid hsl(var(--ck-border))">
<span class="ck-avatar ck-avatar--sm" data-ck-avatar="Siti Nurhaliza"><span></span></span>
<div><div class="ck-text-sm ck-strong">Siti Nurhaliza</div><div class="ck-text-xs ck-muted">Guru</div></div>
</div>
</div>
</header>