แถบด้านบนและเส้นทางนำทาง
สร้างแถบนำทางด้านบนพร้อมช่องค้นหา กระดิ่งแจ้งเตือน และเมนูดรอปดาวน์รูปประจำตัวผู้ใช้ รวมถึงคอมโพเนนต์เส้นทางนำทางด้านล่าง
แถบด้านบนและเส้นทางนำทาง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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 ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แถบด้านบนและเส้นทางนำทาง”
สร้างแถบนำทางด้านบนพร้อมช่องค้นหา กระดิ่งแจ้งเตือน และเมนูดรอปดาวน์รูปประจำตัวผู้ใช้ รวมถึงคอมโพเนนต์เส้นทางนำทางด้านล่าง คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “แถบด้านบนและเส้นทางนำทาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม
ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงแดชบอร์ดและแถบด้านข้าง
- แถบด้านบนและเส้นทางนำทาง
- การ์ดสถิติและวิดเจ็ต KPI
- ตารางข้อมูลและพื้นที่สำรองกราฟ