Tab • Natura11y
Silver tabby cat

Tab

Introduction

The tabs component provides a keyboard-friendly tabbed interface with flexible styling options. You can choose between classic, pill, or generic tabs you can customize to fit your needs.


Classic Tabs

To use the classic tab style, apply the .tabs-nav class. You can add the optional modifier .tabs-nav--horizontal--{x} to control the tab direction, where x is the breakpoint (e.g., md for medium). This allows the tabs to switch from a vertical layout to a horizontal one based on the specified screen size, ensuring consistent appearance across devices.

The mackerel tabby pattern gives slender vertical, gently curving stripes on the sides of the body. These stripes may be continuous or broken into bars and short segments/spots, especially on the flanks and stomach. Three or five vertical lines in an 'M' shape almost always appear on the forehead, along with dark lines from the corners of the eyes, one or more crossing each cheek, and of course many stripes and lines at various angles on the neck and shoulder area, on the flanks, and around the legs and tail. Mackerel tabbies are also called 'fishbone tabbies,' probably doubly named after the mackerel fish.


        <div class="tabs box-shadow-1" role="tablist">
            
            <ul class="tabs-nav tabs-nav--horizontal--md">
                <li>
                    <button
                        id="tab-button-example-01"
                        aria-controls="tab-panel-example-01"
                        aria-selected="true"
                        role="tab">
                            Mackerel
                    </button>
                </li>
                <li>
                    <button
                        id="tab-button-example-02"
                        aria-controls="tab-panel-example-02"
                        aria-selected="false"
                        role="tab">
                            Classic
                    </button>
                </li>
                <li>
                    <button id="tab-button-example-03"
                        aria-controls="tab-panel-example-03"
                        aria-selected="false"
                        role="tab">
                            Ticked
                    </button>
                </li>
            </ul>
            
            <div
                class="tabs__panel shown"
                id="tab-panel-example-01"
                aria-labelledby="tab-button-example-01"
                role="tabpanel">
                <div class="container padding-y-4">
                    <p>
                        The mackerel tabby pattern gives slender vertical, gently curving stripes on the sides of the body. These stripes may be continuous or broken into bars and short segments/spots, especially on the flanks and stomach. Three or five vertical lines in an 'M' shape almost always appear on the forehead, along with dark lines from the corners of the eyes, one or more crossing each cheek, and of course many stripes and lines at various angles on the neck and shoulder area, on the flanks, and around the legs and tail. Mackerel tabbies are also called 'fishbone tabbies,' probably doubly named after the mackerel fish.
                    </p>
                </div>
            </div>
            
            <div
                class="tabs__panel"
                id="tab-panel-example-02"
                aria-labelledby="tab-button-example-02"
                role="tabpanel">
                <div class="container padding-y-4">
                    <p>
                        The classic tabby (also known as blotched or marbled tabby) has the 'M' pattern on the forehead but the body markings, rather than primarily thin stripes or spots, are thick curving bands in a whirled or swirled pattern with a distinctive mark on each side of the body resembling a bullseye. Classic tabby is a recessive trait. Classic tabbies are the most common type of tabby in much of the United Kingdom and the Middle East, among other places, but they are a far second in number to mackerel tabbies in most parts of the world.
                    </p>
                </div>
            </div>
            
            <div
                class="tabs__panel"
                id="tab-panel-example-03"
                aria-labelledby="tab-button-example-02"
                role="tabpanel">
                <div class="container padding-y-4">
                    <p>
                        The ticked tabby pattern is due to even fields of agouti hairs, each with distinct bands of color, which break up the tabby patterning into a salt-and-pepper appearance that makes them look sand-like—thus there are few to no stripes or bands. Residual ghost striping and/or barring can often be seen on the lower legs, face, and belly and sometimes at the tail tip, as well as the standard 'M' and a long dark line running along the spine, primarily in ticked tabbies who also carry a mackerel or classic tabby allele. These types of cats come in many forms and colors.
                    </p>
                </div>
            </div>
        </div>
    
Figure 1
Line #Details
1

The parent .tabs class is required.

This selector uses JavaScript to group the tab buttons and panels with one another.

3-30

The child .tabs-nav <ul> selector is required for styled tabs.

With the child .tabs-nav selector, the .tabs-nav--horizontal--{x} modifier is optional. Here x equals its breakpoint modifier (e.g., lg for large).

Each list item requires a <button>. The button's id attribute equals the value of its associated panel's aria-labelledby attribute.

The aria-controls attribute equals its associated panel's id attribute.

The role="tab" attribute is present on the tab button for assistive technology.

The aria-selected="true" attribute is present on the button where its associated tab panel should be open when the page loads.

32-42

The child .tabs__panel selector is required.

The id attribute equals the value of its associated button's aria-controls attribute.

The aria-labelledby attribute equals the value of its associated button's id attribute.

The role="tabpanel" attribute is present on the accordion panel for assistive technology.


Pill Tabs

For pill-style tabs, use the .tabs-nav--pill modifier along with .tabs-nav. This modifier gives tabs a rounded, pill-like appearance. As with the classic tabs, you can use the .tabs-nav--horizontal--{x} modifier to control the tab layout at different screen sizes.

The mackerel tabby pattern gives slender vertical, gently curving stripes on the sides of the body. These stripes may be continuous or broken into bars and short segments/spots, especially on the flanks and stomach. Three or five vertical lines in an 'M' shape almost always appear on the forehead, along with dark lines from the corners of the eyes, one or more crossing each cheek, and of course many stripes and lines at various angles on the neck and shoulder area, on the flanks, and around the legs and tail. Mackerel tabbies are also called 'fishbone tabbies,' probably doubly named after the mackerel fish.


        <div class="tabs role="tablist">
            
            <ul class="tabs-nav 👉 tabs-nav--pill tabs-nav--horizontal--md">
                <!-- Tab buttons -->
            </ul>
            
             <!-- Tab panels -->
        </div>
    
Figure 2

Generic Tabs

Create a tabbed interface without the .tabs-nav selector. To do this, you need the .tabs parent class and a button for each .tabs__panel element. Each button should include the necessary attributes: aria-selected, aria-controls, and a unique id. Be sure to add role="tab" to each button for proper accessibility.

The example below replaces .tabs-nav with generic navigation.

The mackerel tabby pattern gives slender vertical, gently curving stripes on the sides of the body. These stripes may be continuous or broken into bars and short segments/spots, especially on the flanks and stomach. Three or five vertical lines in an 'M' shape almost always appear on the forehead, along with dark lines from the corners of the eyes, one or more crossing each cheek, and of course many stripes and lines at various angles on the neck and shoulder area, on the flanks, and around the legs and tail. Mackerel tabbies are also called 'fishbone tabbies,' probably doubly named after the mackerel fish.


        <div class="tabs" role="tablist">
            
            <ul class="nav nav--horizontal--md">
                <!-- Tab buttons -->
            </ul>
            
             <!-- Tab panels -->
        </div>
    
Figure 3