---
title: "Tabs"
canonical: https://sky-ui.cf.sky.com/components/tabs
---

# Tabs

Tabs are used to organise and switch between blocks of related content.

## Purpose

Tabs are used to organise and switch between blocks of related content underneath. They enable the user to discover additional content on the page.

They should not be used for navigation within or between different pages.

**Note:** The Tabs component and the [`Navigation Bar`](/navigation-bar/) identical, but
  are semantically different and serve different purposes.

## Anatomy

The Tabs component can be broken down into the following elements -

## Variants & States

- Appearance: Default, Light
- Breakpoint: Mobile, Desktop
- \# of Tabs: 2-6
- Content overflow: on/off

The Tabs component is made up of individual items.

- State: Inactive, Active, Hover, Focus
- Icon: on/off