Dashboardskal och sidofält
Konfigurera dashboardskalet i två kolumner med ett fast sidofält som innehåller navigeringslänkar, ikoner och en användarprofil längst ned.
Dashboardskal och sidofält är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 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.
Översikt över dashboard-layouten
En admin-dashboard är uppbyggd kring ett permanent sidofält till vänster och ett huvudinnehållsområde till höger. Sidofältet har en fast bredd och sträcker sig vanligtvis över hela visningshöjden, medan huvudinnehållet fyller det återstående utrymmet och rullas oberoende. Detta tvåkolumnsskal utgör grunden där alla dashboard-widgetar, tabeller och diagram placeras.
<!-- 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>Bygga sidofältets skal
Sidofältet använder flex h-full w-64 flex-col bg-gray-900 för en mörk panel som sträcker sig över hela höjden. flex-shrink-0 hindrar det från att krympa när huvudinnehållet växer. Dela upp det i tre sektioner med en layout för flexkolumner: ett logotypområde högst upp, en rullningsbar navigeringssektion i mitten med flex-1 overflow-y-auto och ett användarprofilområde som är förankrat längst ned.
<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>Navigeringslänkar i sidofältet
Navigeringsobjekt i sidofältet kombinerar en ikon och en etikett. Använd flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium som grundstil för länkar. Inaktiva länkar använder text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. Den aktiva länken framhävs med bg-gray-800 text-white för att visa den aktuella sidan.
<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>Navigeringsgrupper i sidofältet
Gruppera relaterade navigeringsobjekt under namngivna sektioner så att de blir lättare att hitta. Lägg till en sektionsetikett med mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 före varje grupp med länkar. Detta mönster är vanligt i analys- och SaaS-dashboards med 10 eller fler navigeringsmål.
<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>Användarprofilområde i sidofältet
Längst ned i sidofältet visas den inloggade användarens avatar, namn och e-postadress. Använd flex items-center gap-3 för att justera avataren och texten. Lägg till en inställningsknapp med ikon längst till höger och använd ml-auto. Omslut hela sektionen med ett diskret hovringstillstånd: 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>Omslutare för huvudinnehållsområdet
Huvudinnehållsområdet ligger till höger om sidofältet. Använd flex flex-1 flex-col overflow-hidden så att det fyller det återstående horisontella utrymmet och tillåter oberoende rullning. Det övre fältet förankras högst upp i detta område, inte i sidofältet, och den huvudsakliga rullningsbara regionen ligger under det med 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>Strategi för sidofält på mobiler
På mobilskärmar kan sidofältet inte vara permanent synligt utan att ta upp för mycket utrymme. Dölj det utanför skärmen med -translate-x-full som standard och skjut in det när hamburgermenyn aktiveras genom att växla till translate-x-0. Lägg ett halvtransparent överlägg över huvudinnehållet med bg-black/50, som stänger sidofältet vid klick. Detta mönster är identiskt med det som används i lektionen om det utfällbara sidofältet.
<!-- 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>Varianter av sidofältets bredd
Vissa dashboards använder ett hopfällt sidofält som endast visar ikoner och expanderas vid hovring eller via en växlare. Åstadkom detta med CSS-övergångar för sidofältets bredd: w-16 som standard visar endast ikoner, medan w-64 i expanderat läge visar etiketterna. Använd transition-all duration-300 för övergången. Dölj textetiketterna i hopfällt läge med 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>Avdelare för sidofältets sektioner
Använd my-4 border-t border-gray-800 för att lägga till horisontella avdelare mellan navigeringsgrupper i sidofältet. Det skapar en tydligare åtskillnad än enbart avstånd. Håll avdelarna tunna och mörka så att de smälter in i sidofältets bakgrund men ändå ger visuell struktur. Undvik att använda för många avdelare – två eller tre per sidofält brukar räcka.
<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>Aviseringsbricka på ett navigeringsobjekt
Vissa länkar i sidofältet behöver en aviseringsbricka för att visa olästa objekt eller väntande åtgärder. Lägg till en liten pillerformad bricka till höger i länken med ml-auto. Utforma den som en liten cirkel: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white för ett antal, eller som en mindre punkt för en enkel olästindikator.
<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>Mörka och ljusa teman för sidofältet
Även om mörka sidopaneler är traditionella blir ljusa sidopaneler (bg-white border-r border-gray-200) med mörk text allt populärare för ett renare och modernare utseende. Valet beror på ert varumärke. En mörk sidopanel skapar stark visuell kontrast och skiljer tydligt navigeringen från innehållet. En ljus sidopanel känns luftigare och passar bra ihop med vita huvudytor.
<!-- 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>Snabb kontroll
Testa era kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde ni er att: bygga skalet för en instrumentpanel med två kolumner och en fast sidopanel samt en flexibel huvudyta, strukturera navigeringen i sidopanelen med grupper, aktiva lägen och aviseringsbrickor samt hantera sidopaneler på mobila enheter med en förskjutning utanför skärmen och en överliggande bakgrund. Härnäst bygger vi det övre fältet och brödsmulenavigeringen.
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 ”Dashboardskal och sidofält” gratis?
Ja – hela texten till ”Dashboardskal och 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 ”Dashboardskal och sidofält”?
Konfigurera dashboardskalet i två kolumner med ett fast sidofält som innehåller navigeringslänkar, ikoner och en användarprofil längst ned. 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 1 av 4.
Hur lång tid tar lektionen ”Dashboardskal och 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
- Dashboardskal och sidofält
- Övre fält och brödsmulor
- Statistikkort och KPI-widgetar
- Datatabell och platshållare för diagram