Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Top app bar

The one line at the top of a screen that says what you are looking at and where back goes.

Navigation

Live preview

Source

<header class="dc-ab">
  <button class="dc-ab__btn" type="button">
    <span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
  </button>
  <h1 class="dc-ab__title">주문 상세</h1>
  <div class="dc-ab__actions">
    <button class="dc-ab__btn" type="button">
      <span aria-hidden="true">⌕</span><span class="dc-sr">검색</span>
    </button>
    <button class="dc-ab__btn" type="button">
      <span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
    </button>
  </div>
</header>
.dc-ab {
  display: flex; align-items: center; gap: var(--dc-1);
  padding: var(--dc-2);
  padding-top: calc(var(--dc-safe-top) + var(--dc-2));
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-ab__btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-text);
  font-size: 20px; line-height: 1;
  transition: background var(--dc-fast);
}
.dc-ab__btn:active { background: var(--dc-sunken); }
.dc-ab__title {
  flex: 1 1 auto; min-width: 0;
  margin: 0; padding: 0 var(--dc-1);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--dc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-ab__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.dc-ab__spacer { flex: 0 0 auto; width: 44px; height: 44px; }
.dc-ab--center .dc-ab__title { text-align: center; }
.dc-ab__text {
  flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0 var(--dc-3);
  border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-brand-text);
  font-family: inherit; font-size: 15px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ab__text:active { background: var(--dc-brand-soft); }

How to use it

  • Title the screen, not the pattern: "Order detail", not just "Detail"
  • At most two icon actions on the right; anything more goes into the ⋮ menu
  • Keep back in the first left slot — a moving back button makes thumbs hunt
  • Screens presented modally close (✕) instead of going back (‹)

Watch out for

  • Without --dc-safe-top added to padding-top, the notch swallows the title
  • Every icon button needs a dc-sr name; ⋮ is read as nothing
  • Long titles truncate — pick a short title instead of relying on the ellipsis

Next