Dikey Kenar Çubuğu Düzeni
Logo, simge bağlantıları ve etkin durum göstergesine sahip tam yükseklikte bir kenar çubuğu oluşturun ve bunu ana içerik alanının yanına konumlandırın.
Dikey Kenar Çubuğu Düzeni, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Dikey Kenar Çubuğu Düzeni” dersi ücretsiz mi?
Evet — “Dikey Kenar Çubuğu Düzeni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Dikey Kenar Çubuğu Düzeni” dersinde ne öğreneceğim?
Logo, simge bağlantıları ve etkin durum göstergesine sahip tam yükseklikte bir kenar çubuğu oluşturun ve bunu ana içerik alanının yanına konumlandırın. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Dikey Kenar Çubuğu Düzeni” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Duyarlı Gezinme Çubuğu Oluşturma
- Yapışkan ve Sabit Gezinme
- Dikey Kenar Çubuğu Düzeni
- Daraltılabilir Mobil Kenar Çubuğu