Tabs

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:

Viktig informasjon som brukeren kan overse fordi den er skjult bak en annen fane.
Å 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
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

<Tabs>
  <TabList aria-label="Boligtyper">
    <Tab id="leilighet">Leilighet</Tab>
    <Tab id="rekkehus">Rekkehus</Tab>
    <Tab id="enebolig">Enebolig</Tab>
    <Tab id="villa">Villa</Tab>
    <Tab id="hytte">Hytte</Tab>
  </TabList>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
</Tabs>

Vertikal layout

<Tabs orientation="vertical">
  <TabList aria-label="Boliger i Norge">
    <Tab id="oslo">Oslo</Tab>
    <Tab id="bergen">Bergen</Tab>
    <Tab id="trondheim">Trondheim</Tab>
    <Tab id="stavanger">Stavanger</Tab>
    <Tab id="tromsø">Tromsø</Tab>
  </TabList>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
</Tabs>

Overflow

<Tabs>
  <TabList aria-label="Boligtyper">
    <Tab id="leilighet">Leilighet</Tab>
    <Tab id="rekkehus">Rekkehus</Tab>
    <Tab id="enebolig">Enebolig</Tab>
    <Tab id="villa">Villa</Tab>
    <Tab id="slott">Slott</Tab>
    <Tab id="baat-hus">Båthus</Tab>
    <Tab id="hytte">Hytte</Tab>
    <Tab id="telt">Telt</Tab>
    <Tab id="brakke">Brakke</Tab>
  </TabList>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
  <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>
  </TabPanel>
</Tabs>

Props

Tabs

Prop	Description	Default
`children?`		-
`isDisabled?`		-
`render?`		-
`orientation?`		'horizontal'
`disabledKeys?`	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.	-
`selectedKey?`		-
`defaultSelectedKey?`		-
`keyboardActivation?`		'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?`		-
`render?`		-
`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?`	The unique id of the tab.	-
`target?`		-
`isDisabled?`	Whether the tab is disabled.	-
`render?`		-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`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.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`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?`		-
`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.	-
`render?`		-
`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?`		-