Digital Powertools

Tab tab tab - Building CSS-only tabs

Tabs are an essential UI component that allows users to navigate between different sections of content without scrolling or changing pages. While JavaScript is commonly used for tab functionality, we can create fully functional tabs using only CSS. This approach is lightweight, accessible, and works even when JavaScript is disabled.

Details and Summaries

The foundation of our CSS-only tabs will use the native <details> and <summary> HTML elements. These elements provide built-in expand/collapse functionality without any JavaScript. As a recent addition to the specification for the details element, the name attribute allows to group the details elements together. Within the group, only one single detail element can be expanded.

Let's start with a basic example:

<div class="tabs">
    <details name="tab-group" open>
        <summary>Tab 1</summary>
        <div>
            <p>This is the content for Tab 1.</p>
        </div>
    </details>

    <details name="tab-group">
        <summary>Tab 2</summary>
        <div>
            <p>This is the content for Tab 2.</p>
        </div>
    </details>

    <details name="tab-group">
        <summary>Tab 3</summary>
        <div>
            <p>This is the content for Tab 3.</p>
        </div>
    </details>
</div>
        

While this is a very minimal example, there are a couple of things to note:

• All details elements have the same tab-group name. If you look at the source code of this page, you'll see that the different examples use a different name.
• The div element wrapping the content of the details elements is not strictly required by the details element, but it will make out lives easier as we add support for Safari-based browsers.
• One of the details elements has the open attribute. This will be the details element that is visible by default as the page loads. There is no requirement for this to be the first details element in the list

We'll be using this HTML structure for all remaining examples in the rest of the article. If you're reading this in a modern browser, this plain example without any css looks like this:

Going horizontal

The details are all hooked up together, but they don't look like tabs at all yet. Nothing we can't fix with some css, but let's go through it step by step.

.tabs {
    display: flex;
    flex-wrap: wrap;

    & > details {
        display: contents;

        div {
            order: 1;
        }
        &::details-content {
            order: 1;
        }
    }
    summary {
        order: 0;
    }
}
        

• First of all, making the wrapper div a flex element will move all the details elements on the same line.
• Next, making the details element a contents element decouples the summary and child div from the detail element. The summary and content div are now considered as children from the flex wrapper div.
• As a final step, the summary and content divs can now be grouped. The order css property sorts the children of the flex element based on its value. In this example, the summary elements with order 0 will be sorted first, followed by the contents div with order 1.
• Recent Chrome versions will wrap all child elements of the details element into a pseudo-element called details-content. This pseudo-element will wrap the content div, so in Chrome, it's the pseudo-element that needs the order property set to 1

The current iteration will look like this, with the summaries horizontally sorted on the left followed by the active details content div:

Getting pretty with it

While the current iteration looks good, it's still not looking very much like tabs. Let's add some styling to make it look a bit nicer.

.tabs {
    display: flex;
    flex-wrap: wrap;

    & > details {
        display: contents;

        div {
            order: 1;
            width: 100%;

            padding: .5rem;
            border: 1px solid var(--primary-color);
            background-color: color-mix(in srgb, var(--neutral-color) 100%, var(--secondary-color) 10%);
        }
        &[open]::details-content {
            order: 1;
            width: 100%;
        }
    }
    summary {
        order: 0;

        padding: .5rem;
        border: 1px solid var(--primary-color);
        border-bottom: none;

        [open] > & {
            z-index: 1;
            margin-bottom: -1px;
            background-color: color-mix(in srgb, var(--neutral-color) 100%, var(--secondary-color) 10%);
        }
    }
}
        

• Giving the content div and the pseudo-element a width of 100% pushes onto the next row of the flex container.
• The summary and content div both get a border to show the outline of the tabs and the content.
• The active summary and content div get the illusion of being a single element by combining four properties. This combination hides the border of the contents div that separates the active summary from the content.
• The summary elements don't have a bottom border.
• The active summary element is pulled down 1px using the margin.
• The active summary element gets a higher z-index than the content div.
• Both the summary and the content div have the same, non-transparent color.

Are we there yet?

That already looks like a tab interface! But there still some rough edges that you might have noticed. Let's get them fixed and push this over the finish line.

.tabs {
    display: flex;
    flex-wrap: wrap;

    & > details {
        display: contents;

        div {
            order: 1;
            width: 100%;

            padding: .5rem;
            border: 1px solid var(--primary-color);
            background-color: color-mix(in srgb, var(--neutral-color) 100%, var(--secondary-color) 10%);
        }
        &[open]::details-content {
            order: 1;
            width: 100%;
        }
    }
    summary {
        order: 0;
        display: block;
        cursor: pointer;

        padding: .5rem;
        border: 1px solid var(--primary-color);
        border-bottom: none;

        &::-webkit-details-marker,
        &::marker {
            display: none;
        }

        [open] > & {
            pointer-events: none;
            z-index: 1;
            margin-bottom: -1px;
            background-color: color-mix(in srgb, var(--neutral-color) 100%, var(--secondary-color) 10%);
        }
    }
}
        

• The markers. Yes, the default markers are still there. And there's no single way to get rid of them. On Chrome, you can use the display: block property on the summary. On safari and others, you can use the ::marker and ::-webkit-details-marker pseudo-elements and set them to display: none.
• The tabs don't really look clickable, do they? Setting the cursor: pointer; property changes the cursor to a little hand as the mouse moves over the element, making it clear it's clickable.
• Have you clicked on the active tab in the previous examples? I bet you have. And the active content disappeared, leaving a large empty void on the page. By setting pointer-events: none on the summary of the open details will prevent the user from clicking on it, and thus prevent them from having no open details at all.