PricingLoginStart free
Tailwind CSS Academy · 강의

상단 바와 탐색 경로

검색 입력란, 알림 벨, 사용자 아바타 드롭다운이 있는 상단 탐색 바를 만들고 그 아래에 탐색 경로 컴포넌트를 배치합니다.

레슨 2/413개 단계

상단 바와 탐색 경로은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Top Bar Role in a Dashboard

The top bar (or top navigation bar) sits at the top of the main content area, not the sidebar. It provides global actions available on every page: a search input for quick content lookup, notification bell for alerts, and a user avatar that opens a dropdown menu. Keeping these actions in one consistent location reduces cognitive load for users navigating the dashboard.

Top Bar Shell

The top bar is a flex row with flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6. The fixed height h-16 keeps it predictable and matches the sidebar logo row for visual alignment. It lives inside the main content wrapper, not inside the sidebar, so it spans only the main area's width.

<header class="flex h-16 flex-shrink-0 items-center justify-between
               border-b border-gray-200 bg-white px-6">
  <!-- Left: hamburger (mobile) + breadcrumbs -->
  <div class="flex items-center gap-4">
    <!-- Mobile hamburger -->
    <button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
      <svg class="h-5 w-5"><!-- menu icon --></svg>
    </button>
    <!-- Breadcrumbs -->
  </div>

  <!-- Right: search, notifications, avatar -->
  <div class="flex items-center gap-3">
    <!-- Right controls -->
  </div>
</header>

Search Input in Top Bar

A search input in the top bar lets users quickly navigate to pages or find records. Keep it compact with a set width like w-64 that expands on focus using a CSS transition. Include a magnifying glass icon inside the input using relative positioning. Add rounded-lg bg-gray-100 text-sm focus:bg-white focus:ring-2 focus:ring-blue-500 for a clean, modern look.

<div class="relative">
  <svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
       fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
  </svg>
  <input
    type="search"
    placeholder="Search..."
    class="w-64 rounded-lg bg-gray-100 py-2 pl-9 pr-4 text-sm
           transition focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
</div>

Notification Bell

The notification bell triggers a dropdown with recent alerts. Display an unread count badge on the icon using absolute positioning: absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white. Wrap both icon and badge in a relative container so the badge positions relative to the icon itself.

<button class="relative rounded-full p-2 text-gray-600 hover:bg-gray-100"
        aria-label="Notifications">
  <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159
             c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
  </svg>
  <!-- Unread badge -->
  <span class="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center
               rounded-full bg-red-500 text-[10px] font-bold text-white">
    3
  </span>
</button>

User Avatar and Dropdown Trigger

The user avatar in the top right opens a dropdown menu with account options. Display the avatar as a small rounded image with a subtle hover ring: h-8 w-8 rounded-full ring-2 ring-gray-200 hover:ring-blue-400 cursor-pointer transition. Alternatively, show initials in a colored circle when no photo is available, using a colored background that derives from the user's name or account color.

<div class="relative">
  <!-- Avatar button -->
  <button class="flex items-center gap-2 rounded-full"
          onclick="toggleUserMenu()">
    <img src="/avatar.jpg" alt="Jane Doe"
         class="h-8 w-8 rounded-full ring-2 ring-gray-200 transition hover:ring-blue-400">
    <svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>

  <!-- Dropdown menu (toggled) -->
  <div class="absolute right-0 mt-2 w-48 rounded-xl bg-white py-2 shadow-lg ring-1 ring-black/5">
    <!-- Menu items -->
  </div>
</div>

Breadcrumbs Overview

Breadcrumbs show the user's current location in the app's page hierarchy. In a dashboard, they typically appear just below the top bar or within the top bar's left side. A breadcrumb like Home / Users / Edit User lets users navigate up the hierarchy with one click. Use a nav element with aria-label='Breadcrumb' for accessibility.

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm">
    <li>
      <a href="/dashboard" class="text-gray-500 hover:text-gray-900 transition-colors">
        Dashboard
      </a>
    </li>
    <li class="text-gray-300">/</li>
    <li>
      <a href="/users" class="text-gray-500 hover:text-gray-900 transition-colors">
        Users
      </a>
    </li>
    <li class="text-gray-300">/</li>
    <li class="font-medium text-gray-900">Edit User</li>
  </ol>
</nav>

Breadcrumbs With Chevron Separators

Replace the slash separator with a small chevron icon for a more refined look. Use a tiny SVG arrow with h-4 w-4 text-gray-400 between breadcrumb items. Wrap each separator in a li with aria-hidden='true' so screen readers skip it and only announce the navigation links and current page.

<ol class="flex items-center gap-1 text-sm">
  <li>
    <a href="/dashboard" class="font-medium text-gray-500 hover:text-gray-900">Dashboard</a>
  </li>
  <li aria-hidden="true">
    <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </li>
  <li>
    <a href="/settings" class="font-medium text-gray-500 hover:text-gray-900">Settings</a>
  </li>
  <li aria-hidden="true">
    <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </li>
  <li class="font-semibold text-gray-900" aria-current="page">Profile</li>
</ol>

Page Title Below Top Bar

Some dashboards place a page title section just below the top bar, inside the scrollable main content area. This section contains the page heading (h1), a description, and action buttons like Export or Add New. Use flex items-center justify-between mb-6 to align the title on the left and action buttons on the right.

<div class="mb-6 flex items-center justify-between">
  <!-- Title -->
  <div>
    <h1 class="text-xl font-bold text-gray-900">Users</h1>
    <p class="mt-1 text-sm text-gray-500">Manage your team members and their permissions.</p>
  </div>
  <!-- Actions -->
  <div class="flex items-center gap-3">
    <button class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium
                   text-gray-700 transition hover:bg-gray-50">
      Export
    </button>
    <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold
                   text-white transition hover:bg-blue-700">
      Add user
    </button>
  </div>
</div>

Combining Top Bar and Breadcrumbs

A common pattern places breadcrumbs inside the top bar on the left, with search and user controls on the right. This combines navigation context with global actions in a single horizontal strip. Breadcrumbs appear to the right of the mobile hamburger button, and on desktop the sidebar takes up the far left leaving the top bar solely for the main content area controls.

<header class="flex h-16 flex-shrink-0 items-center justify-between
               border-b border-gray-200 bg-white px-6">
  <!-- Left: hamburger + breadcrumbs -->
  <div class="flex items-center gap-3">
    <button class="lg:hidden"><!-- hamburger --></button>
    <nav aria-label="Breadcrumb">
      <ol class="hidden items-center gap-2 text-sm sm:flex">
        <li><a href="/" class="text-gray-500 hover:text-gray-900">Home</a></li>
        <li class="text-gray-300">/</li>
        <li class="font-medium text-gray-900">Settings</li>
      </ol>
    </nav>
  </div>
  <!-- Right: search + bell + avatar -->
  <div class="flex items-center gap-3"></div>
</header>

Tab Navigation Inside Dashboard Pages

Some dashboard pages have sub-sections navigated by tabs below the page title. Build horizontal tabs as a flex row of buttons with an underline active state. The active tab uses border-b-2 border-blue-600 text-blue-600 font-semibold while inactive tabs use border-b-2 border-transparent text-gray-500 hover:text-gray-700 with a transparent bottom border to maintain consistent height.

<div class="border-b border-gray-200">
  <nav class="flex gap-8" aria-label="Tabs">
    <button class="border-b-2 border-blue-600 pb-3 text-sm font-semibold text-blue-600">
      General
    </button>
    <button class="border-b-2 border-transparent pb-3 text-sm font-medium
                   text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
      Security
    </button>
    <button class="border-b-2 border-transparent pb-3 text-sm font-medium
                   text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
      Notifications
    </button>
  </nav>
</div>

Top Bar on Mobile

On mobile, the top bar simplifies significantly. Hide the search input (or replace it with an icon-only search button) and hide the breadcrumbs. Show only the hamburger button, the page title, and the avatar. Use hidden sm:flex to show the search and hidden md:flex for breadcrumbs, keeping the mobile top bar uncluttered at narrow widths.

<header class="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4">
  <!-- Mobile: hamburger -->
  <button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
    <svg class="h-5 w-5"><!-- icon --></svg>
  </button>

  <!-- Mobile: page title (replaces breadcrumbs) -->
  <p class="font-semibold text-gray-900 lg:hidden">Dashboard</p>

  <!-- Desktop: search (hidden on mobile) -->
  <div class="hidden sm:block"><!-- search input --></div>

  <!-- Always: avatar -->
  <img src="/avatar.jpg" class="h-8 w-8 rounded-full">
</header>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

인터랙티브 레슨에서 답해보세요

Lesson Recap

In this lesson you learned: building a top bar with search, notification bell, and user avatar, creating accessible breadcrumb navigation with chevron separators and aria-current, and adapting the top bar for mobile with hidden elements at small viewports. Next up we add stat cards and KPI widgets to the dashboard.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
30
레슨
120
무료로 학습 시작전체 코스 보기

자주 묻는 질문

“상단 바와 탐색 경로” 강의는 무료인가요?

네 — “상단 바와 탐색 경로” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“상단 바와 탐색 경로”에서 뭘 배우나요?

검색 입력란, 알림 벨, 사용자 아바타 드롭다운이 있는 상단 탐색 바를 만들고 그 아래에 탐색 경로 컴포넌트를 배치합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“상단 바와 탐색 경로” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 대시보드 틀과 사이드바
  2. 상단 바와 탐색 경로
  3. 통계 카드와 KPI 위젯
  4. 데이터 테이블과 차트 자리 표시자
← Tailwind CSS Academy(으)로 돌아가기