Layout med vertikalt sidofält
Bygg ett sidofält i full höjd med logotyp, ikonlänkar och en indikator för aktivt tillstånd, placerat bredvid huvudinnehållet.
Layout med vertikalt sidofält är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Syftet med en vertikal sidopanel
En vertikal sidopanel är en kolumn med fast bredd på vänster eller höger sida av en dashboard som innehåller de viktigaste navigeringslänkarna. Till skillnad från en navigeringslist högst upp håller en sidopanel all navigering synlig samtidigt utan att ta upp horisontellt skärmutrymme.
Sidopanelen kombineras med ett huvudinnehållsområde i en flexrad: flex min-h-screen på sidans omslag, w-64 flex-shrink-0 på sidopanelen och flex-1 på huvudinnehållet så att det fyller det återstående utrymmet.
<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>Sidopanelens sidhuvud med logotyp
Sidopanelens sidhuvud innehåller produktens logotyp och namn. Använd flex items-center gap-3 px-6 py-5 border-b border-gray-800 för att skapa ett rent sidhuvud som avgränsas från navigeringslänkarna nedanför.
Håll logotypen liten (w-7 h-7) så att den inte tar över sidopanelens bredd. Produktnamnet använder text-lg font-bold text-white för att framträda mot den mörka bakgrunden.
<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>Format för navigeringslänkar
Navigeringslänkarna i sidopanelen ligger i ett skrollbart <nav>-element med flex-1 overflow-y-auto px-4 py-6. Varje länk är ett block med utfyllnad för ett bekvämt klickområde: flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium.
Standardläget (inaktivt) använder text-gray-400 hover:bg-gray-800 hover:text-white. Den aktiva länken använder bg-gray-800 text-white för att visa var användaren befinner sig.
<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>Grupperade sektioner i sidopanelen
Om en dashboard har många länkar kan Ni organisera dem i namngivna sektioner. Lägg till en liten etikett med versaler, till exempel px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500, före varje grupp av relaterade länkar.
Separera sektionerna med avståndet mt-6 för att skapa visuellt utrymme. Det gör stora sidopaneler mycket enklare att överblicka.
<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>Aktivt läge med accentlinje till vänster
Ett alternativt format för aktivt läge använder en accentlinje till vänster i stället för en bakgrundsfyllning. Använd border-l-2 border-blue-500 text-white på den aktiva länken och border-l-2 border-transparent på inaktiva länkar.
Det skapar en diskret indikator som inte visuellt täcker hela länk raden. Den transparenta kanten på inaktiva länkar gör att alla länkar behåller samma bredd, vilket förhindrar layoutförskjutningar när det aktiva läget ändras.
<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>Antalsbrickor på länkar i sidopanelen
Länkar i sidopaneler visar ofta antal aviseringar eller statusbrickor. Använd flex items-center justify-between på länken och lägg till en bricka med ml-auto för att skjuta den till höger i länk raden.
Håll brickan liten (px-2 py-0.5 rounded-full text-xs font-bold) och använd en färg som kontrasterar mot sidopanelens bakgrund.
<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>Hopfällbar sektion i sidopanelen
Stora dashboards behöver ibland expanderbara och hopfällbara sektioner i sidopanelen. En knapp i sektionshuvudet växlar synligheten för underlänkarna genom att växla klasser med JavaScript. Växlingspilen roterar med en CSS-övergång för att visa om sektionen är öppen eller stängd.
Använd rotate-90 på pilen när sektionen är öppen och styr detta genom att växla en klass. Underlänkarna visas i en kapslad lista med mt-1 ml-4 space-y-1.
<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>Användarprofil längst ned
Längst ned i sidopanelen finns vanligtvis en sektion för användarprofilen. Använd mt-auto på denna sektion så att den automatiskt skjuts längst ned i flexkolumnen. Visa användarens avatar, namn och e-postadress på en kompakt rad.
Genom att lägga till en knapp för inställningar eller utloggning får användaren snabb åtkomst till kontoåtgärder utan att huvudnavigeringen blir rörig.
<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>Kompakt sidopanel med endast ikoner
En kompakt sidopanel med ikoner visar bara ikoner, utan textetiketter, för att spara utrymme. Denna variant använder w-16 i stället för w-64 och tar bort textspannen från varje länk, så att endast SVG-ikonen finns kvar i en centrerad behållare.
Verktygstips vid hovring visar länkens namn. Använd group relative på varje länk och ett absolut positionerat verktygstips som visas med 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>Variant av sidopanel med ljust tema
Alla sidopaneler har inte mörka bakgrunder. En ljus sidopanel använder bg-white border-r border-gray-200 för ett rent och avskalat utseende som är vanligt i produktivitetsappar. Länkfärgerna ändras till text-gray-600 hover:bg-gray-100 hover:text-gray-900 och det aktiva läget använder bg-blue-50 text-blue-700.
Ljusa sidopaneler passar bra ihop med ljusa huvudinnehållsområden och känns mindre visuellt tunga än mörka varianter.
<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>Responsiv synlighet för sidopanelen
På mobila enheter bör sidopanelen döljas och ersättas av en hamburgermeny i det övre fältet. Använd hidden lg:flex på sidopanelen så att den endast visas på stora skärmar. På mindre skärmar tar den mobila lådan, som behandlas i nästa lektion, dess plats.
Detta responsiva mönster är branschstandard för dashboardapplikationer – sidopanel på datorer och låda på mobila enheter.
<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>Snabbkontroll
Testa Er förståelse av koncepten i Tailwind CSS Mastery från den här lektionen.
Lektionssammanfattning
I den här lektionen har Ni lärt Er: sidopanelens grundstruktur använder flex min-h-screen på sidans omslag, en sidopanel med fast bredd och flex-1 för huvudinnehållet; format för aktiva länkar uttrycks med bakgrundsfyllning (bg-gray-800 text-white) eller en accentlinje till vänster; samt att användarprofilsektionen fästs längst ned i sidopanelen genom att använda mt-auto i en flexkolumn. Nästa steg är att bygga en hopfällbar mobil sidopanel.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Layout med vertikalt sidofält” gratis?
Ja – hela texten till ”Layout med vertikalt sidofält” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Layout med vertikalt sidofält”?
Bygg ett sidofält i full höjd med logotyp, ikonlänkar och en indikator för aktivt tillstånd, placerat bredvid huvudinnehållet. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Layout med vertikalt sidofält”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Bygga en responsiv navbar
- Fast och klistrad navigering
- Layout med vertikalt sidofält
- Hopfällbart sidofält för mobiler