Menu dropdown

Menu mengambang untuk aksi sekunder. Menutup sendiri saat Esc atau klik di luar, dan mengembalikan fokus ke pemicu.

Menu aksi pengguna

Pemicu memakai data-ck-toggle dan menunjuk menunya lewat aria-controls.

Lihat kode

<div class="ck-dropdown">
  <button class="ck-btn ck-btn--outline" data-ck-toggle aria-controls="menu-user" aria-expanded="false" aria-haspopup="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> Akun <span class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></span>
  </button>
  <div class="ck-menu ck-menu--left" id="menu-user" hidden>
    <div class="ck-menu__label"><div class="ck-text-sm ck-strong">Siti Nurhaliza</div><div class="ck-text-xs ck-muted">Guru · SMA Negeri 1</div></div>
    <div class="ck-menu__sep"></div>
    <a class="ck-menu__item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> Profil & Settings</a>
    <a class="ck-menu__item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 22v-4a2 2 0 1 0-4 0v4M18 10l4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2M18 5v17M6 5v17M4 6l8-4 8 4"/></svg> Ganti lembaga</a>
    <div class="ck-menu__sep"></div>
    <button class="ck-menu__item ck-menu__item--destructive" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg> Logout</button>
  </div>
</div>

Menu notifikasi

Menu lebar dengan daftar bergulir dan penanda belum dibaca.

Lihat kode

<div class="ck-dropdown">
  <button class="ck-btn ck-btn--ghost ck-btn--icon" data-ck-toggle aria-controls="menu-notif" aria-expanded="false" aria-haspopup="true" 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-menu ck-menu--right ck-menu--wide" id="menu-notif" hidden>
    <div class="ck-row ck-between" style="padding:.5rem .75rem"><span class="ck-text-sm ck-strong">Notifikasi</span><button class="ck-btn ck-btn--link ck-btn--sm">Tandai semua dibaca</button></div>
    <div class="ck-menu__sep"></div>
    <a class="ck-menu__item" href="#" style="align-items:flex-start">
      <span class="ck-dot ck-dot--primary" style="margin-top:.4rem"></span>
      <span><span class="ck-text-sm ck-strong">Kuis Fisika dimulai</span><br><span class="ck-text-xs ck-muted">Kelas XI IPS 3 · 5 menit lalu</span></span>
    </a>
    <a class="ck-menu__item" href="#" style="align-items:flex-start">
      <span class="ck-dot ck-dot--primary" style="margin-top:.4rem"></span>
      <span><span class="ck-text-sm ck-strong">32 jawaban masuk</span><br><span class="ck-text-xs ck-muted">Kuis Matematika Bab 3 · 1 jam lalu</span></span>
    </a>
  </div>
</div>