Tabs

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.

Egnet til:

  • Strukturere innhold uten å måtte laste en ny side
  • Dele opp innhold i tydelig seksjoner
  • Forenkle navigasjon når brukeren ikke trenger å se alt på en gang

Uegnet til:

  • Å gi en rask oversikt over innhold, siden Tabs skjuler informasjon
  • Presentere innhold som må sammenlignes på tvers av seksjoner
  • Veilede brukeren gjennom en steg-for-steg-prosess der rekkefølgen er viktig
  • Håndtere store mengder innhold som kan gjøre siden treg å laste
  • Erstatte hovednavigasjon eller brukes til filtrering og sortering
  • Være en løsning når innholdet like gjerne kan vises på én side eller fordeles på flere sider

Varianter

Tabs kan ha enten horisontal (default) eller vertikal layout. Horisontale tabs som overflower sin container kan scrolles.

Horisontal layout

<UNSAFE_Tabs>
  <UNSAFE_TabList aria-label="Boligtyper">
    <UNSAFE_Tab id="leilighet">Leilighet</UNSAFE_Tab>
    <UNSAFE_Tab id="rekkehus">Rekkehus</UNSAFE_Tab>
    <UNSAFE_Tab id="enebolig">Enebolig</UNSAFE_Tab>
    <UNSAFE_Tab id="villa">Villa</UNSAFE_Tab>
    <UNSAFE_Tab id="hytte">Hytte</UNSAFE_Tab>
  </UNSAFE_TabList>
  <UNSAFE_TabPanel id="leilighet">
    <h3 className="mb-4 font-semibold text-lg">Leilighet</h3>
    <p>
      Leiligheter er den mest populære boligtypen blant våre medlemmer. Vi
      tilbyr alt fra små 1-roms til store familieboligter i attraktive
      områder rundt om i landet.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="rekkehus">
    <h3 className="mb-4 font-semibold text-lg">Rekkehus</h3>
    <p>
      Rekkehus gir deg det beste fra to verdener - egen uteplass og hage,
      samtidig som du slipper alt vedlikeholdet som følger med en enebolig.
      Perfekt for barnefamilier.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="enebolig">
    <h3 className="mb-4 font-semibold text-lg">Enebolig</h3>
    <p>
      Drømmer du om egen enebolig med stor hage? Vi har flotte eneboliger i
      rolige strøk, både nybygg og etablerte hus i gode bomiljø.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="villa">
    <h3 className="mb-4 font-semibold text-lg">Villa</h3>
    <p>
      Våre villaer kombinerer stil og komfort med moderne løsninger. Her får
      du romslige boliger med høy standard og gode kvaliteter.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="hytte">
    <h3 className="mb-4 font-semibold text-lg">Hytte</h3>
    <p>
      Våre hytter ligger i naturskjønne omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
</UNSAFE_Tabs>

Vertikal layout

<UNSAFE_Tabs orientation="vertical">
  <UNSAFE_TabList aria-label="Boliger i Norge">
    <UNSAFE_Tab id="oslo">Oslo</UNSAFE_Tab>
    <UNSAFE_Tab id="bergen">Bergen</UNSAFE_Tab>
    <UNSAFE_Tab id="trondheim">Trondheim</UNSAFE_Tab>
    <UNSAFE_Tab id="stavanger">Stavanger</UNSAFE_Tab>
    <UNSAFE_Tab id="tromsø">Tromsø</UNSAFE_Tab>
  </UNSAFE_TabList>
  <UNSAFE_TabPanel id="oslo">
    <h3 className="mb-4 font-semibold text-lg">Oslo</h3>
    <p>
      Opplev hovedstadens pulserende byliv med moderne leiligheter i
      sentrale strøk. Fra trendy Grünerløkka til elegante Frogner - finn
      ditt urbane hjem midt i kulturens og næringslivets hjerte.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="bergen">
    <h3 className="mb-4 font-semibold text-lg">Bergen</h3>
    <p>
      Mellom de syv fjell finner du sjarmerende boliger med unik karakter.
      Våre bergenske hjem kombinerer historisk sjel med moderne komfort,
      omgitt av spektakulær natur og vestlandsk hygge.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="trondheim">
    <h3 className="mb-4 font-semibold text-lg">Trondheim</h3>
    <p>
      Studentbyen ved Nidelva byr på rike tradisjoner og innovativ
      arkitektur. Våre boliger ligger perfekt plassert for å nyte både byens
      akademiske atmosfære og den vakre trondheimsfjorden.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="stavanger">
    <h3 className="mb-4 font-semibold text-lg">Stavanger</h3>
    <p>
      Energihovedstaden kombinerer internasjonalt miljø med norsk
      kystkultur. Utforsk våre boliger fra den pittoreske gamlebyen til
      moderne boligområder med kort vei til både jobb og fantastiske
      strender.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="tromsø">
    <h3 className="mb-4 font-semibold text-lg">Tromsø</h3>
    <p>
      Under nordlyset og midnattssola ligger vår nordligste storby. Her
      tilbyr vi unike boliger med arktisk sjarm, hvor du kan nyte
      spektakulær natur og en livlig kulturscene året rundt.
    </p>
  </UNSAFE_TabPanel>
</UNSAFE_Tabs>

Overflow

<UNSAFE_Tabs>
  <UNSAFE_TabList aria-label="Boligtyper">
    <UNSAFE_Tab id="leilighet">Leilighet</UNSAFE_Tab>
    <UNSAFE_Tab id="rekkehus">Rekkehus</UNSAFE_Tab>
    <UNSAFE_Tab id="enebolig">Enebolig</UNSAFE_Tab>
    <UNSAFE_Tab id="villa">Villa</UNSAFE_Tab>
    <UNSAFE_Tab id="slott">Slott</UNSAFE_Tab>
    <UNSAFE_Tab id="baat-hus">Båthus</UNSAFE_Tab>
    <UNSAFE_Tab id="hytte">Hytte</UNSAFE_Tab>
    <UNSAFE_Tab id="telt">Telt</UNSAFE_Tab>
    <UNSAFE_Tab id="brakke">Brakke</UNSAFE_Tab>
  </UNSAFE_TabList>
  <UNSAFE_TabPanel id="leilighet">
    <h3 className="mb-4 font-semibold text-lg">Leilighet</h3>
    <p>
      Leiligheter er den mest populære boligtypen blant våre medlemmer. Vi
      tilbyr alt fra små 1-roms til store familieboligter i attraktive
      områder rundt om i landet.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="rekkehus">
    <h3 className="mb-4 font-semibold text-lg">Rekkehus</h3>
    <p>
      Rekkehus gir deg det beste fra to verdener - egen uteplass og hage,
      samtidig som du slipper alt vedlikeholdet som følger med en enebolig.
      Perfekt for barnefamilier.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="enebolig">
    <h3 className="mb-4 font-semibold text-lg">Enebolig</h3>
    <p>
      Drømmer du om egen enebolig med stor hage? Vi har flotte eneboliger i
      rolige strøk, både nybygg og etablerte hus i gode bomiljø.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="villa">
    <h3 className="mb-4 font-semibold text-lg">Villa</h3>
    <p>
      Våre villaer kombinerer stil og komfort med moderne løsninger. Her får
      du romslige boliger med høy standard og gode kvaliteter.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="slott">
    <h3 className="mb-4 font-semibold text-lg">Slott</h3>
    <p>
      Våre slott ligger i romantiske omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="baat-hus">
    <h3 className="mb-4 font-semibold text-lg">Båthus</h3>
    <p>
      Våre båthus ligger i naturskjønne omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="hytte">
    <h3 className="mb-4 font-semibold text-lg">Hytte</h3>
    <p>
      Våre hytter ligger i naturskjønne omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="telt">
    <h3 className="mb-4 font-semibold text-lg">Telt</h3>
    <p>
      Våre telt ligger i naturskjønne omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
  <UNSAFE_TabPanel id="brakke">
    <h3 className="mb-4 font-semibold text-lg">Brakke</h3>
    <p>
      Våre brakker ligger i naturskjønne omgivelser og tilbyr en perfekt
      tilflukt fra hverdagens stress. Her kan du nyte roen og stillheten i
      vakre omgivelser.
    </p>
  </UNSAFE_TabPanel>
</UNSAFE_Tabs>