Tailwind CSS Academy · leksjon

Bygge en responsiv navigasjonslinje

Opprett en horisontal navigasjonslinje med logo, lenker og CTA som foldes sammen til en hamburgermeny på mobil ved hjelp av hidden- og responsive flex-verktøy.

Leksjon 1 av 413 trinn

Bygge en responsiv navigasjonslinje 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.

Anatomien til en navbar

En navigasjonslinje (navbar) ligger øverst på en side og inneholder vanligvis en logo til venstre, navigasjonslenker i midten eller til høyre og en handlingsknapp helt til høyre. På mobil slås lenkene sammen til en hamburgermeny for å spare plass.

Navbar-skallet bruker flex items-center justify-between for å fordele disse tre områdene horisontalt, med px-6 py-4 for behagelig innvendig luft.

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

Logo- og merkevareområde

Logoområdet er vanligvis et ankermerke som omslutter enten en SVG-logo eller et tekstbasert merkenavn. Bruk flex items-center gap-2 hvis De kombinerer et ikon og tekst, slik at de justeres vertikalt.

Bruk fet skrift i logoen og merkevarens primærfarge: font-bold text-xl text-blue-600. Gjør ankermerket fokuserbart med tastatur ved å bruke fokusstilen focus:outline-none focus-visible:ring-2.

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

Navigasjonslenker på skrivebord

Navigasjonslenkene på skrivebord ligger i en hidden md:flex items-center gap-6-beholder – usynlig på små skjermer og vist som en flex-rad på mellomstore skjermer og større. Hver lenke bruker text-sm font-medium text-gray-600 hover:text-gray-900 for en diskret standardstil som blir mørkere ved pekerbevegelse.

Legg til transition-colors duration-150 for en jevn fargeendring ved pekerbevegelse, og bruk en annen tekstfarge eller understreking for å vise hvilken side som er aktiv.

<div class="hidden md:flex items-center gap-6">
  <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
  <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
  <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
  <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>

CTA- og påloggingsknapp på skrivebord

Høyresiden av navbaren inneholder vanligvis en diskret Sign in-lenke og en tydelig Sign up-knapp. Når De pakker dem inn i hidden md:flex items-center gap-3, holdes de skjult på mobil og justert på skrivebord.

Ved å bruke begge knappene sammen opprettes et tydelig hierarki: den diskrete lenken for tilbakevendende brukere og den tydelige knappen for å skaffe nye brukere.

<div class="hidden md:flex items-center gap-3">
  <a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Sign in
  </a>
  <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </a>
</div>

Hamburgermenyknapp

På mobil erstatter en hamburgerknapp lenkene fra skrivebordsvisningen. Vis den bare på små skjermer med md:hidden, og gi den attributtet aria-label="Open menu" for bedre tilgjengelighet.

Knappen viser tre horisontale linjer (et klassisk hamburgerikon) ved hjelp av SVG. Når brukeren klikker, veksler JavaScript en klasse for å vise mobilmenypanelet. Selve knappen bruker p-2 text-gray-600 hover:bg-gray-100 rounded-md for et behagelig trykkområde.

<button
  id="menu-btn"
  aria-label="Open menu"
  class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
  onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
  <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>

Mobilmenypanel

Mobilmenyen er et panel i full bredde som vises under navbaren når hamburgerknappen trykkes. Den er skjult som standard med klassen hidden, som JavaScript fjerner når knappen klikkes.

Stable lenkene vertikalt med flex flex-col gap-1 px-4 pb-4, og gi hver lenke block py-2 text-base font-medium for et stort trykkområde som er enkelt å bruke med tommelen.

<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
  <div class="flex flex-col gap-1 px-4 pb-4 pt-2">
    <a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
    <a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
    <a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
    <a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
    <a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
      Get Started
    </a>
  </div>
</div>

Sette sammen hele navbaren

Sett sammen alle delene i ett enkelt <nav>-element. Strukturen er: omsluttende nav med skygge, og inni denne en beholder med maksimal bredde og tre områder – logo, skrivebordslenker og skrivebords-CTA – etterfulgt av mobilmenypanelet i full bredde utenfor beholderen.

Den indre beholderen max-w-7xl mx-auto hindrer navbarinnholdet i å bli for bredt på store skjermer, samtidig som bakgrunnen kan strekke seg fra kant til kant.

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
      <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="/login" class="text-sm text-gray-600">Sign in</a>
      <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
    </div>
    <button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
            onclick="document.getElementById('mob').classList.toggle('hidden')">
      <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>
  </div>
  <div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
    <a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
    <a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
    <a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
  </div>
</nav>

Indikator for aktiv lenke

En indikator for aktiv lenke viser brukerne hvilken side de befinner seg på. Et vanlig mønster er å bruke en bunnkant eller endre tekstfargen. Bruk text-blue-600 border-b-2 border-blue-600 pb-0.5 på den aktive lenken, slik at den skiller seg ut fra de grå lenkene.

I servergenererte apper legger De til de aktive klassene betinget på serveren. I JS-rammeverk sammenligner De den gjeldende ruten med lenkens href og bruker klassene programmatisk.

<div class="hidden md:flex items-center gap-6">
  <!-- Active link -->
  <a href="/features"
     class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
    Features
  </a>
  <!-- Inactive links -->
  <a href="/pricing"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Pricing
  </a>
  <a href="/blog"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Blog
  </a>
</div>

Navbar med søkefelt

Å legge til et søkefelt i navbaren er et vanlig krav på innholdsrike nettsteder. Plasser søkefeltet midt i navbaren ved hjelp av flex-1 max-w-md mx-8 for å gi det fleksibel bredde samtidig som proporsjonene bevares.

Stilsett feltet med w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 for en ryddig søkelinje med fokusring.

<div class="flex-1 max-w-md mx-8">
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
         fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
    </svg>
    <input
      type="search"
      placeholder="Search..."
      class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
             bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  </div>
</div>

Nedtrekkselement i navigasjonen

Et nedtrekkselement i navigasjonen viser en undermeny når brukeren holder pekeren over det eller klikker på det. Bruk group-verktøyet på den overordnede lenken og group-hover:block på den opprinnelig hidden-skjulte undermenyen for å implementere et nedtrekksfelt ved hjelp av ren CSS.

Plasser nedtrekksfeltet med absolute top-full left-0 mt-1, slik at det vises rett under den overordnede lenken. Legg til min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 for å gi det utseendet til et ordentlig panel.

<div class="relative group">
  <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
    Products
    <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="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
    <a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
    <a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
    <a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
  </div>
</div>

Mørk navbar-variant

En mørk navbar bruker en mørk bakgrunn, for eksempel bg-gray-900, med lys tekst. Bytt text-gray-600 til text-gray-300 for lenkene, bruk hover:text-white ved pekerbevegelse, og endre knappen til bg-blue-500 siden den må skille seg ut mot den mørke bakgrunnen.

Mørke navbarer er populære i utviklerverktøy, SaaS-dashbord og alle produkter som retter seg mot et teknisk publikum.

<nav class="bg-gray-900 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-white">DevTool</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
      <a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
      <a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
    </div>
    <a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Dashboard
    </a>
  </div>
</nav>

Hurtigsjekk

Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte De: responsiv navbar-struktur med et flex-oppsett i tre områder (logo, lenker, CTA); hamburgerknapp og mobilmenypanel som veksles med JavaScript og skjules på skrivebord med md:hidden; og synlighet for lenker på skrivebord som styres med hidden md:flex, slik at lenkene skjules på mobil og vises på større skjermer. Neste gang gjør vi navigasjonen klebrig og fast.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bygge en responsiv navigasjonslinje» gratis?

Ja – hele teksten i «Bygge en responsiv navigasjonslinje» 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 «Bygge en responsiv navigasjonslinje»?

Opprett en horisontal navigasjonslinje med logo, lenker og CTA som foldes sammen til en hamburgermeny på mobil ved hjelp av hidden- og responsive flex-verktøy. 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 «Bygge en responsiv navigasjonslinje»?

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

← Tilbake til Tailwind CSS Academy