垂直侧边栏布局
构建全高度侧边栏，其中包含徽标、图标链接和激活状态指示器，并将其放置在主要内容区域旁边。
垂直侧边栏布局 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Purpose of a Vertical Sidebar
A vertical sidebar is a fixed-width column on the left (or right) side of a dashboard that holds primary navigation links. Unlike a top navbar, a sidebar keeps all navigation visible at once without taking up horizontal screen space.
The sidebar is paired with a main content area using a flex row: flex min-h-screen on the page wrapper, w-64 flex-shrink-0 on the sidebar, and flex-1 on the main content so it expands to fill remaining space.
<div class="flex min-h-screen">
<aside class="w-64 flex-shrink-0 bg-gray-900 text-white"><!-- sidebar --></aside>
<main class="flex-1 bg-gray-50 p-8"><!-- content --></main>
</div>Sidebar Header With Logo
The sidebar header contains the product logo and name. Use flex items-center gap-3 px-6 py-5 border-b border-gray-800 to create a clean header section separated from the navigation links below.
Keep the logo small (w-7 h-7) so it does not overwhelm the sidebar's width. The product name uses text-lg font-bold text-white for prominence against the dark background.
<aside class="w-64 bg-gray-900 text-white flex flex-col">
<div class="flex items-center gap-3 px-6 py-5 border-b border-gray-800">
<div class="w-7 h-7 bg-blue-500 rounded-lg flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/>
</svg>
</div>
<span class="text-lg font-bold text-white">AdminKit</span>
</div>
</aside>Navigation Link Styles
Sidebar navigation links sit inside a scrollable <nav> element with flex-1 overflow-y-auto px-4 py-6. Each link is a block with padding for a comfortable click target: flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium.
The default (inactive) state uses text-gray-400 hover:bg-gray-800 hover:text-white. The active link uses bg-gray-800 text-white to show where the user currently is.
<nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
<!-- Active link -->
<a href="/dashboard"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-gray-800 text-white">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>
<!-- Inactive link -->
<a href="/users"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
Users
</a>
</nav>Sidebar Section Groups
For dashboards with many links, organize them into labeled sections. Add a small uppercase section label like px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 before each group of related links.
Separate sections with mt-6 spacing for visual breathing room. This makes large sidebars much easier to scan.
<nav class="flex-1 overflow-y-auto px-4 py-6">
<!-- Section: Main -->
<p class="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Main</p>
<div class="space-y-1">
<a href="/" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-gray-800 text-white">Overview</a>
<a href="/analytics" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Analytics</a>
</div>
<!-- Section: Settings -->
<p class="mt-6 px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Settings</p>
<div class="space-y-1">
<a href="/profile" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Profile</a>
<a href="/billing" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">Billing</a>
</div>
</nav>Active State With Left Border Accent
An alternative active state style uses a left border accent instead of a background fill. Apply border-l-2 border-blue-500 text-white on the active link and border-l-2 border-transparent on inactive links.
This creates a subtle indicator that does not visually block the entire link row. The transparent border on inactive links ensures all links stay the same width, preventing layout shifts when the active state changes.
<nav class="flex-1 px-4 py-6 space-y-1">
<!-- Active with left border -->
<a href="/"
class="flex items-center gap-3 pl-4 pr-3 py-2 text-sm font-medium
text-white border-l-2 border-blue-500">
Overview
</a>
<!-- Inactive with transparent left border -->
<a href="/analytics"
class="flex items-center gap-3 pl-4 pr-3 py-2 text-sm font-medium
text-gray-400 border-l-2 border-transparent
hover:text-white hover:border-gray-600 transition-colors">
Analytics
</a>
</nav>Badge Counts on Sidebar Links
Sidebar links often display notification counts or status badges. Use flex items-center justify-between on the link and add a ml-auto badge to push it to the right side of the link row.
Keep the badge small (px-2 py-0.5 rounded-full text-xs font-bold) and use a color that contrasts against the sidebar background.
<a href="/messages"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium
text-gray-400 hover:bg-gray-800 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5-1-5z"/>
</svg>
Messages
<span class="ml-auto px-2 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">4</span>
</a>Collapsible Sidebar Section
Large dashboards sometimes need expandable/collapsible sections within the sidebar. A section header button toggles visibility of child links using JavaScript class toggling. The toggle arrow rotates with a CSS transition to indicate open or closed state.
Use rotate-90 on the arrow when the section is open, controlled by toggling a class. Child links appear in a mt-1 ml-4 space-y-1 nested list.
<div>
<button
onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-90')"
class="w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium text-gray-400 hover:bg-gray-800 hover:text-white">
<span class="flex items-center gap-3">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
Reports
</span>
<svg class="w-4 h-4 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
<div class="hidden mt-1 ml-4 space-y-1">
<a href="/reports/weekly" class="block px-3 py-2 rounded-lg text-xs text-gray-400 hover:bg-gray-800 hover:text-white">Weekly</a>
<a href="/reports/monthly" class="block px-3 py-2 rounded-lg text-xs text-gray-400 hover:bg-gray-800 hover:text-white">Monthly</a>
</div>
</div>User Profile Section at Bottom
The bottom of the sidebar typically holds a user profile section. Use mt-auto on this section so it naturally pushes to the bottom of the flex column. Show the user's avatar, name, and email in a compact row.
Adding a settings or logout button gives users quick access to account actions without cluttering the main navigation area.
<aside class="w-64 bg-gray-900 text-white flex flex-col h-screen">
<!-- Logo -->
<div class="px-6 py-5 border-b border-gray-800">
<span class="font-bold text-white">AdminKit</span>
</div>
<!-- Nav links (fills space) -->
<nav class="flex-1 px-4 py-6">
<!-- links... -->
</nav>
<!-- User profile at bottom -->
<div class="mt-auto border-t border-gray-800 p-4">
<div class="flex items-center gap-3">
<img src="avatar.jpg" alt="" class="w-8 h-8 rounded-full object-cover" />
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white truncate">Jane Doe</p>
<p class="text-xs text-gray-400 truncate">jane@example.com</p>
</div>
<button class="text-gray-400 hover:text-white">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
</svg>
</button>
</div>
</div>
</aside>Icon-Only Compact Sidebar
A compact icon sidebar shows only icons (no text labels) to save space. This variant uses w-16 instead of w-64 and removes the text spans from each link, keeping only the SVG icon inside a centered container.
Tooltips on hover reveal the link's name. Use group relative on each link and an absolutely positioned tooltip that appears with group-hover:opacity-100.
<aside class="w-16 bg-gray-900 flex flex-col items-center py-6 gap-2">
<a href="/"
class="group relative p-3 rounded-xl bg-gray-800 text-white"
aria-label="Dashboard">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
<span class="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-2 py-1 rounded
bg-gray-900 text-white text-xs whitespace-nowrap
opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
Dashboard
</span>
</a>
</aside>Light Theme Sidebar Variant
Not all sidebars use dark backgrounds. A light sidebar uses bg-white border-r border-gray-200 for a clean, minimal look popular in productivity apps. Link colors switch to text-gray-600 hover:bg-gray-100 hover:text-gray-900 and the active state uses bg-blue-50 text-blue-700.
Light sidebars blend well with light-themed main content areas and are less visually heavy than dark variants.
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
<div class="px-6 py-5 border-b border-gray-100">
<span class="text-lg font-bold text-gray-900">AppDash</span>
</div>
<nav class="flex-1 px-4 py-6 space-y-1">
<a href="/"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium bg-blue-50 text-blue-700">
Overview
</a>
<a href="/users"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors">
Users
</a>
<a href="/settings"
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors">
Settings
</a>
</nav>
</aside>Responsive Sidebar Visibility
On mobile, the sidebar should be hidden and replaced by a hamburger menu in the top bar. Use hidden lg:flex on the sidebar so it only appears on large screens. On smaller screens, the mobile drawer (covered in the next lesson) takes its place.
This responsive pattern is the industry standard for dashboard applications — sidebar on desktop, drawer on mobile.
<div class="flex min-h-screen">
<!-- Sidebar: hidden on small screens -->
<aside class="hidden lg:flex w-64 flex-shrink-0 flex-col bg-gray-900 text-white">
<!-- ... sidebar content ... -->
</aside>
<!-- Main content -->
<div class="flex-1 flex flex-col">
<!-- Top bar: shown on small screens, hidden when sidebar is visible -->
<header class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
<span class="font-bold text-gray-900">AppDash</span>
<button aria-label="Open menu" class="p-2 text-gray-600 hover:bg-gray-100 rounded-md">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</header>
<main class="flex-1 p-8 bg-gray-50"><!-- page content --></main>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: the sidebar shell uses flex min-h-screen on the page wrapper with a fixed-width sidebar and flex-1 main content; active link styles are expressed with background fill (bg-gray-800 text-white) or a left border accent; and the user profile section is pinned to the sidebar's bottom using mt-auto on a flex column. Next up we build a collapsible mobile sidebar drawer.
常见问题解答
「垂直侧边栏布局」课时是免费的吗？
是的 — 「垂直侧边栏布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「垂直侧边栏布局」这节课中我会学到什么？
构建全高度侧边栏，其中包含徽标、图标链接和激活状态指示器，并将其放置在主要内容区域旁边。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「垂直侧边栏布局」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。