Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Tab bar bawah

Untuk aplikasi dengan maksimal lima tujuan utama yang harus bisa dicapai sekali sentuh dari mana saja.

Navigasi

Pratinjau langsung

Sumber

<nav class="dc-tb" aria-label="주요 메뉴">
  <ul class="dc-tb__list">
    <li>
      <a class="dc-tb__item" href="#" aria-current="page">
        <span class="dc-tb__ico" aria-hidden="true">⌂</span>
        <span class="dc-tb__lbl">홈</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">⌕</span>
        <span class="dc-tb__lbl">검색</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">＋</span>
        <span class="dc-tb__lbl">등록</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">♡</span>
        <span class="dc-tb__lbl">찜</span>
        <span class="dc-tb__dot" aria-hidden="true"></span>
        <span class="dc-sr">새 소식 있음</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">◉</span>
        <span class="dc-tb__lbl">내 정보</span>
      </a>
    </li>
  </ul>
</nav>
.dc-tb {
  padding-bottom: var(--dc-safe-bottom);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-tb__list { display: flex; align-items: stretch; }
.dc-tb__list > li { flex: 1 1 0; min-width: 0; display: flex; }
.dc-tb__item {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: var(--dc-2) var(--dc-1);
  color: var(--dc-text-mute); text-decoration: none;
  transition: color var(--dc-fast), background var(--dc-fast);
}
.dc-tb__item:active { background: var(--dc-sunken); }
.dc-tb__item[aria-current="page"] { color: var(--dc-brand-text); }
.dc-tb__ico { font-size: 20px; line-height: 1; }
.dc-tb__lbl {
  font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.dc-tb__dot {
  position: absolute; top: 9px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: var(--dc-r-full);
  background: var(--dc-danger);
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-tb__badge {
  position: absolute; top: 5px; right: calc(50% - 22px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--dc-r-full);
  background: var(--dc-danger); color: var(--dc-text-on);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-tb__item--raised { justify-content: flex-start; padding-top: var(--dc-1); }
.dc-tb__raise {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -14px;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-size: 24px; line-height: 1;
  box-shadow: var(--dc-sh-2);
}

Cara memakainya

  • Cukup 3–5 slot; tujuan keenam sebaiknya masuk ke tab profil
  • Pertahankan label teks — ikon saja tidak terbaca oleh semua orang
  • Tandai tab aktif dengan aria-current="page", bukan hanya warna
  • Menyentuh tab aktif lagi harus menggulir tab itu kembali ke atas

Hal yang perlu diwaspadai

  • Tanpa --dc-safe-bottom pada padding, home indicator iPhone menutupi tab
  • Lima slot berarti 78px per slot; perpendek label yang tidak muat satu baris
  • Angka badge hanya terlihat mata — ulangi dalam span dc-sr untuk pembaca layar

Berikutnya