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>

Props

Tabs

Prop	Description	Default
`children?`		-
`isDisabled?`		-
`orientation?`	The orientation of the tabs.	'horizontal'
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`selectedKey?`	The currently selected key in the collection (controlled).	-
`defaultSelectedKey?`	The initial selected key in the collection (uncontrolled).	-
`keyboardActivation?`	Whether tabs are activated automatically on focus or manually.	'automatic'
Events
`onSelectionChange?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the tabs container	-
Accessibility
`id?`		-
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

TabList

Prop	Description	Default
`children?`		-
`items?`	Item objects in the collection.	-
`dependencies?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the tab list	-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

Tab

Prop	Description	Default
`children?`		-
`id?`		-
`isDisabled?`		-
Events
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Links
`referrerPolicy?`		-
`rel?`		-
`href?`		-
`target?`		-
`hrefLang?`		-
`download?`		-
`ping?`		-
`routerOptions?`		-
Styles
`style?`		-
`className?`	CSS classes to apply to the tab	-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-

TabPanel

Prop	Description	Default
`children?`		-
`id?`	The unique id of the tab.	-
`shouldForceMount?`	Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.	false
Styles
`style?`		-
`className?`	CSS classes to apply to the tab panel	-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-