Dashboard-struktur og sidestolpe
Sett opp dashboardets struktur med to kolonner og en fast sidestolpe som inneholder navigasjonslenker, ikoner og en brukerprofilseksjon nederst.
Dashboard-struktur og sidestolpe er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Oversikt over dashboardoppsettet
Et admin-dashboard er bygget rundt en permanent sidemeny til venstre og et hovedinnholdsområde til høyre. Sidemenyen har fast bredde og vanligvis høyde som dekker hele visningsområdet, mens hovedområdet fyller den gjenværende plassen og kan rulle uavhengig. Dette oppsettet med to kolonner er grunnlaget for alle dashboardets widgeter, tabeller og diagrammer.
<!-- 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>Bygge skallet for sidemenyen
Sidemenyen bruker flex h-full w-64 flex-col bg-gray-900 for et mørkt panel som fyller høyden. flex-shrink-0 hindrer at den blir klemt sammen når hovedinnholdet vokser. Del den inn i tre seksjoner ved hjelp av en fleksibel kolonnelayout: et logoområde øverst, en rullbar navigasjonsseksjon i midten med flex-1 overflow-y-auto, og et brukerprofilområde festet nederst.
<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>Navigasjonslenker i sidemenyen
Navigasjonselementer i sidemenyen kombinerer et ikon og en etikett. Bruk flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium som grunnstil for lenker. Inaktive lenker bruker text-gray-400 hover:bg-gray-800 hover:text-white transition-colors. Den aktive lenken fremheves med bg-gray-800 text-white for å vise gjeldende side.
<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>Navigasjonsgrupper i sidemenyen
Samle relaterte navigasjonselementer under navngitte seksjoner for å gjøre dem enklere å finne. Legg til en seksjonsetikett med mb-2 mt-6 px-3 text-xs font-semibold uppercase tracking-widest text-gray-500 før hver gruppe med lenker. Dette mønsteret er vanlig i analyse- og SaaS-dashbord med 10 eller flere navigasjonsmå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>Brukerprofilområde i sidemenyen
Nederst i sidemenyen vises avataren, navnet og e-postadressen til den innloggede brukeren. Bruk flex items-center gap-3 for å justere avataren og teksten. Legg til en knapp med innstillingsikon helt til høyre ved hjelp av ml-auto. Pakk hele seksjonen inn i en diskret hover-tilstand: 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>Omslag for hovedinnholdsområdet
Hovedinnholdsområdet ligger til høyre for sidemenyen. Bruk flex flex-1 flex-col overflow-hidden slik at det fyller den gjenværende horisontale plassen og tillater uavhengig rulling. Toppfeltet festes øverst i dette området, ikke i sidemenyen, og hovedområdet som kan rulle, ligger under det ved hjelp av 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 for sidemeny på mobil
På mobilskjermer kan ikke sidemenyen være permanent synlig uten å ta opp for mye plass. Skjul den utenfor skjermen med -translate-x-full som standard, og skyv den inn når hamburgermenyen aktiveres, ved å veksle til translate-x-0. Legg et halvgjennomsiktig bakteppe over hovedinnholdet med bg-black/50, og lukk sidemenyen når brukeren trykker på det. Dette mønsteret er identisk med det som brukes i leksjonen om sammenleggbar sidemeny.
<!-- 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 sidemenyens bredde
Noen dashbord bruker en sammenfoldet sidemeny som bare viser ikoner, og som utvides ved hover eller via en bryter. Oppnå dette med CSS-overganger på sidemenyens bredde: w-16 som standard viser bare ikoner, mens w-64 i utvidet tilstand viser etiketter. Bruk transition-all duration-300 for overgangen. Skjul tekstetikettene i sammenfoldet tilstand 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>Skillelinjer mellom sidemenyens seksjoner
Bruk my-4 border-t border-gray-800 for å legge til vannrette skillelinjer mellom navigasjonsgrupper i sidemenyen. Dette gir et ryddigere skille enn bare mellomrom. Hold skillelinjene tynne og mørke, slik at de går i ett med bakgrunnen i sidemenyen samtidig som de gir visuell struktur. Unngå å bruke for mange skillelinjer – to eller tre per sidemeny er vanligvis nok.
<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>Varslingsmerke på navigasjonselement
Noen lenker i sidemenyen trenger et varslingsmerke for å vise uleste elementer eller ventende handlinger. Legg til et lite merke i pilleform, justert til høyre i lenken ved hjelp av ml-auto. Utform det som en liten sirkel: ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white for et antall, eller som en mindre prikk for en enkel indikator på uleste elementer.
<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ørke og lyse temaer for sidemenyen
Selv om mørke sidefelt er tradisjonelle, blir lyse sidefelt (bg-white border-r border-gray-200) med mørk tekst stadig mer populære for et renere og mer moderne uttrykk. Valget avhenger av merkevaren Deres. Et mørkt sidefelt skaper sterk visuell kontrast og skiller navigasjonen tydelig fra innholdet. Et lyst sidefelt føles luftigere og passer godt sammen med hvite hovedinnholdsområder.
<!-- 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>Kort sjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De å: bygge skallet for et dashbord med to kolonner med et fast sidefelt og et fleksibelt hovedområde, strukturere navigasjonen i sidefeltet med grupper, aktive tilstander og varslingsmerker, og håndtere sidefelt på mobil med en forskyvning utenfor skjermen og et overlegg i bakgrunnen. Neste steg er å bygge topplinjen og brødsmulestien.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Dashboard-struktur og sidestolpe» gratis?
Ja – hele teksten i «Dashboard-struktur og sidestolpe» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Dashboard-struktur og sidestolpe»?
Sett opp dashboardets struktur med to kolonner og en fast sidestolpe som inneholder navigasjonslenker, ikoner og en brukerprofilseksjon nederst. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Dashboard-struktur og sidestolpe»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Dashboard-struktur og sidestolpe
- Topplinje og brødsmuler
- Statistikkort og KPI-widgeter
- Datatabell og plassholdere for diagrammer