Tabs

ReactSass

Tabs/faner er en enkel måte å organisere innhold på ved å gruppere lignende informasjon på samme side. Dette gjør at innhold kan sees uten at brukeren må navigere bort fra den siden.

<Tabs>
    <TabList aria-label="tabs">
        <Tab>Bedrifter</Tab>
        <Tab>Bedriftansvarlige</Tab>
        <Tab>Rådgivere</Tab>
    </TabList>

    <TabPanel>Innhold for Bedrifter</TabPanel>

    <TabPanel>Innhold for Bedriftansvarlige</TabPanel>

    <TabPanel>
        Innhold for Rådgivere
        
        <Tabs>
            <TabList aria-label="subtabs">
                <Tab>Bedrift AS</Tab>
                <Tab>Alternativ AS</Tab>
            </TabList>
            <TabPanel>Innhold for Bedrift AS</TabPanel>
            <TabPanel>Innhold for Alternativ AS</TabPanel>
        </Tabs>
    </TabPanel>
</Tabs>

Best practices

• Denne komponenten er i første omgang utformet for å brukes i innholdsdelen av en side, og er designet for å brukes med ett nivå.
• Bytter visning av innhold på samme side - navigerer ikke til en ny.
• Brukes horisontalt med 2-9 tabs.
• Bør ha korte og beskrivende navn.
• Den første fanen skal vise den informasjonen som er mest relevant for brukeren.

Når skal man ikke bruke tabs?

• Bør ikke brukes når det er nødvendig å sammenligne eller se innholdet i de ulike fanene samtidig. Hvis dette er et behov, er det bedre å bruke accordion.
• Bør ikke brukes hvis man trenger å lese gjennom alt innholdet for å forstå en stegvis prosess.
• Skal ikke brukes for å sende brukeren til en ny side.

Eksempler på bruk

Eksempel på navigasjon mellom faner. Klikk for å se større.

Klikk for å se større

Klikk for å se større