仪表板框架与侧边栏
设置双列仪表板框架，加入固定侧边栏，其中包含导航链接、图标和底部的用户资料区域。
仪表板框架与侧边栏 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Dashboard Layout Overview
An admin dashboard is structured around a persistent sidebar on the left and a main content area on the right. The sidebar is fixed-width and typically full viewport height, while the main area fills the remaining space and scrolls independently. This two-column shell is the foundation on which all dashboard widgets, tables, and charts are placed.
<!-- Dashboard shell structure -->
<div class="flex h-screen overflow-hidden bg-gray-100">
<!-- Sidebar -->
<aside class="w-64 flex-shrink-0">
<!-- Navigation -->
</aside>
<!-- Main content area -->
<div class="flex flex-1 flex-col overflow-hidden">
<!-- Top bar -->
<main class="flex-1 overflow-y-auto p-6">
<!-- Page content -->
</main>
</div>
</div>Building the Sidebar Shell
The sidebar uses flex h-full w-64 flex-col bg-gray-900 for a dark, full-height panel. flex-shrink-0 prevents it from compressing when the main content grows. Divide it into three sections using flex column layout: a logo area at the top, a scrollable nav section in the middle with flex-1 overflow-y-auto, and a user profile area pinned to the bottom.
<aside class="flex h-screen w-64 flex-shrink-0 flex-col bg-gray-900">
<!-- Logo area -->
<div class="flex h-16 items-center border-b border-gray-800 px-4">
<div class="flex items-center gap-2 font-bold text-white">
<div class="h-7 w-7 rounded-lg bg-blue-500"></div>
Dashboard
</div>
</div>
<!-- Scrollable navigation -->
<nav class="flex-1 overflow-y-auto px-3 py-4">
<!-- Navigation links -->
</nav>
<!-- User profile -->
<div class="border-t border-gray-800 p-4">
<!-- User info -->
</div>
</aside>Sidebar Navigation Links
Navigation items in the sidebar combine an icon and a label. Use flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium as the base link style. Inactive links use text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. The active link is highlighted with bg-gray-800 text-white to show the current page.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Active link -->
<a href="/dashboard"
class="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2
text-sm font-medium text-white">
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3"/>
</svg>
Overview
</a>
<!-- Inactive link -->
<a href="/users"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition-colors hover:bg-gray-800 hover:text-white">
<!-- Icon + label -->
Users
</a>
</nav>Sidebar Navigation Groups
Group related navigation items under labeled sections for better discoverability. Add a section label with mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 before each group of links. This pattern is common in analytics and SaaS dashboards where there are 10 or more navigation destinations.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<p class="mb-2 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Main
</p>
<a href="/dashboard" class="flex items-center gap-3 rounded-lg ...">Overview</a>
<a href="/analytics" class="flex items-center gap-3 rounded-lg ...">Analytics</a>
<!-- Settings group -->
<p class="mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500">
Settings
</p>
<a href="/billing" class="flex items-center gap-3 rounded-lg ...">Billing</a>
<a href="/team" class="flex items-center gap-3 rounded-lg ...">Team</a>
</nav>User Profile Area in Sidebar
The bottom of the sidebar shows the logged-in user's avatar, name, and email. Use flex items-center gap-3 to align the avatar and text. Add a settings icon button on the far right with ml-auto. Wrap the whole section in a subtle hover state: hover:bg-gray-800 rounded-lg p-2 cursor-pointer.
<div class="border-t border-gray-800 p-3">
<div class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-gray-800">
<img src="/avatar.jpg" alt="User" class="h-9 w-9 rounded-full">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-white">Jane Doe</p>
<p class="truncate text-xs text-gray-400">jane@example.com</p>
</div>
<button class="ml-auto rounded-md p-1 text-gray-400 hover:text-white">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35"/>
</svg>
</button>
</div>
</div>Main Content Area Wrapper
The main content area sits to the right of the sidebar. Use flex flex-1 flex-col overflow-hidden so it fills the remaining horizontal space and allows independent scrolling. The top bar docks at the top of this area (not the sidebar), and the main scrolling region sits below it using flex-1 overflow-y-auto.
<div class="flex flex-1 flex-col overflow-hidden">
<!-- Top bar (sticks to top of main area) -->
<header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
<!-- Search, notifications, avatar -->
</header>
<!-- Scrollable page content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
<!-- Dashboard widgets, tables, charts -->
</main>
</div>Mobile Sidebar Strategy
On mobile screens, the sidebar cannot be permanently visible without taking too much space. Hide it off-screen with -translate-x-full by default and slide it in when the hamburger menu is activated by toggling translate-x-0. Overlay the main content with a semi-transparent backdrop bg-black/50 that closes the sidebar on click. This pattern is identical to the one used in the collapsible sidebar lesson.
<!-- Overlay backdrop (shown when sidebar is open) -->
<div id="sidebar-backdrop"
class="fixed inset-0 z-20 hidden bg-black/50 lg:hidden"
onclick="closeSidebar()"></div>
<!-- Sidebar with transition -->
<aside id="sidebar"
class="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full flex-col bg-gray-900
transition-transform duration-300 lg:relative lg:translate-x-0 lg:flex">
<!-- ... -->
</aside>Sidebar Width Variants
Some dashboards use a collapsed sidebar that shows only icons and expands on hover or via a toggle. Achieve this with CSS transitions on the sidebar width: default w-16 shows icons only, expanded w-64 shows labels. Transition with transition-all duration-300. Hide the text labels in collapsed mode using opacity-0 w-0 overflow-hidden.
<!-- Collapsible sidebar pattern -->
<aside id="sidebar"
class="flex flex-col bg-gray-900 transition-all duration-300"
:class="expanded ? 'w-64' : 'w-16'">
<a href="/dashboard" class="flex items-center gap-3 rounded-lg px-3 py-2">
<svg class="h-5 w-5 flex-shrink-0 text-gray-400"><!-- icon --></svg>
<span :class="expanded ? 'opacity-100' : 'opacity-0 w-0 overflow-hidden'"
class="transition-opacity duration-200 text-sm text-gray-400">
Overview
</span>
</a>
</aside>Sidebar Section Dividers
Use my-4 border-t border-gray-800 to add horizontal dividers between navigation groups in the sidebar. This creates a cleaner separation than just spacing alone. Keep dividers thin and dark so they blend with the sidebar background while still providing visual structure. Avoid overusing dividers — two or three per sidebar is typically enough.
<nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
<!-- Main group -->
<a href="/" class="...">Overview</a>
<a href="/analytics" class="...">Analytics</a>
<a href="/reports" class="...">Reports</a>
<!-- Divider -->
<div class="my-4 border-t border-gray-800"></div>
<!-- Settings group -->
<a href="/billing" class="...">Billing</a>
<a href="/api" class="...">API Keys</a>
</nav>Notification Badge on Nav Item
Some sidebar links need a notification badge to indicate unread items or pending actions. Add a small pill badge aligned to the right of the link using ml-auto. Style it as a small circle: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white for a count, or a smaller dot for a simple unread indicator.
<a href="/messages"
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium
text-gray-400 transition hover:bg-gray-800 hover:text-white">
<svg class="h-5 w-5"><!-- message icon --></svg>
Messages
<!-- Badge -->
<span class="ml-auto flex h-5 min-w-[20px] items-center justify-center
rounded-full bg-blue-500 px-1 text-xs font-semibold text-white">
3
</span>
</a>Dark and Light Sidebar Themes
While dark sidebars are traditional, light sidebars (bg-white border-r border-gray-200) with dark text are increasingly popular for a cleaner, modern look. The choice depends on your brand. A dark sidebar creates strong visual contrast and clearly separates navigation from content. A light sidebar feels airier and pairs well with white main content areas.
<!-- Dark sidebar -->
<aside class="w-64 bg-gray-900 text-gray-400">
<!-- Links: text-gray-400 hover:bg-gray-800 hover:text-white -->
<!-- Active: bg-gray-800 text-white -->
</aside>
<!-- Light sidebar -->
<aside class="w-64 border-r border-gray-200 bg-white text-gray-600">
<!-- Links: text-gray-600 hover:bg-gray-50 hover:text-gray-900 -->
<!-- Active: bg-blue-50 text-blue-700 -->
</aside>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building the two-column dashboard shell with a fixed sidebar and flexible main area, structuring sidebar navigation with groups, active states, and notification badges, and handling mobile sidebars with an off-screen translate and overlay backdrop. Next up we build the top bar and breadcrumbs.
常见问题解答
「仪表板框架与侧边栏」课时是免费的吗？
是的 — 「仪表板框架与侧边栏」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「仪表板框架与侧边栏」这节课中我会学到什么？
设置双列仪表板框架，加入固定侧边栏，其中包含导航链接、图标和底部的用户资料区域。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「仪表板框架与侧边栏」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 仪表板框架与侧边栏
- 顶部栏与面包屑
- 统计卡片与 KPI 小组件
- 数据表与图表占位区