Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Tabs

    Tabs are in-page organizational elements designed to allow users to navigate between different but related content on a page.

    Overview

    Tabs are in-page organizational elements designed to allow users to navigate between different but related content on a page.

    View of a Tabs component

    When to Use

    Tabs are used to group information that may fall into different categories to help reduce cognitive load for users. By using tabs to organize content, the number of pages needed to complete a task is reduced. Information within tabs should not be directly related as it is not meant to compare information in two groups.

    Formatting

    Anatomy

    Tabs anatomy diagram
    1. Tab Label
    2. Tab Icon (Optional)
    3. Selected Tab Item

    Alignment

    Alignment and appearance of tabs is dependent on whether or not they are contained in another component. The tabs should be aligned to the grid within the container they inhabit.

    Alignment of tabs on desktop view

    Behaviors

    States

    Tabs allow for selected and unselected states. Only one tab can be selected at a time, and one tab must always be selected. When a user selects a new tab, the previous tab is automatically deselected.

    Tabs component select and unselected states

    Modifiers

    Tabs with Icons

    An optional icon is available to add to the left of the tab label.