PricingLoginStart free
Tailwind CSS Academy · Lekcja

Pionowy układ panelu bocznego

Zbudować panel boczny o pełnej wysokości z logo, linkami z ikonami i wskaźnikiem aktywnego stanu, umieszczony obok głównego obszaru treści.

Lekcja 3 z 413 kroki

Pionowy układ panelu bocznego to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Odpowiedz w interaktywnej lekcji

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.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
30
Lekcje
120
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Pionowy układ panelu bocznego” jest bezpłatna?

Tak — pełny tekst „Pionowy układ panelu bocznego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pionowy układ panelu bocznego”?

Zbudować panel boczny o pełnej wysokości z logo, linkami z ikonami i wskaźnikiem aktywnego stanu, umieszczony obok głównego obszaru treści. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?

Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Pionowy układ panelu bocznego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?

Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Budowanie responsywnego navbara
  2. Przyklejona i stała nawigacja
  3. Pionowy układ panelu bocznego
  4. Zwijany panel boczny na urządzeniach mobilnych
← Powrót do Tailwind CSS Academy