Tabs - Basic
Using a combination of several CSS features allows us to make a tabbed content component, no JS required.
Demo
-
These tabs, heavily inspried by the good work at Chrome.dev CSS Carousel Gallery, use a combination of Anchor Positioning, Scroll Snap and Scroll Markers to create a CSS-only tabbed content panel.
In supporting browsers, as you click each tab, the content panel below should just change. This is all CSS, no JS involved.
Maxime porro veritatis consequuntur blanditiis distinctio voluptate sint hic architecto, praesentium obcaecati! Voluptatibus porro ratione debitis, natus error quasi provident fugiat ut, hic eum quibusdam veniam dolore a. Veniam, dolore?
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, corporis alias. Eius optio iure, consectetur saepe itaque sed provident velit accusamus esse cum magni pariatur facere quisquam nulla placeat! Deleniti!
Saepe adipisci quibusdam nihil doloremque veritatis sunt ex, voluptatibus obcaecati? Dolor inventore natus distinctio delectus voluptatem saepe officia laboriosam corporis asperiores quo! Sint ipsum incidunt accusamus possimus rerum vitae mollitia.
Minima nam reprehenderit cum nihil error sed ipsam libero, exercitationem non in aperiam praesentium dicta expedita dolorem eveniet natus architecto molestiae velit voluptate doloremque dolores tempora totam porro officia. Architecto.
Omnis soluta labore libero dolorum earum, dolor, commodi cum beatae harum minus reiciendis dolores maxime, facere sapiente perferendis! Qui, laboriosam. Commodi tenetur veritatis culpa corrupti impedit magnam vitae nobis quidem!
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos optio expedita animi laudantium quasi sapiente, dolorum quo perferendis officia velit nemo reiciendis nostrum nihil ullam sed pariatur provident. Harum, itaque.
Minima nam reprehenderit cum nihil error sed ipsam libero, exercitationem non in aperiam praesentium dicta expedita dolorem eveniet natus architecto molestiae velit voluptate doloremque dolores tempora totam porro officia. Architecto.
Omnis soluta labore libero dolorum earum, dolor, commodi cum beatae harum minus reiciendis dolores maxime, facere sapiente perferendis! Qui, laboriosam. Commodi tenetur veritatis culpa corrupti impedit magnam vitae nobis quidem!
Odit, reiciendis blanditiis ut minus modi quis soluta odio aliquid alias facere ab non veritatis magnam, deleniti mollitia error esse iusto adipisci numquam velit? Reiciendis rerum aperiam ut cum perspiciatis?
Maxime porro veritatis consequuntur blanditiis distinctio voluptate sint hic architecto, praesentium obcaecati! Voluptatibus porro ratione debitis, natus error quasi provident fugiat ut, hic eum quibusdam veniam dolore a. Veniam, dolore?
HTML
<!-- No special HTML, just some container/wrapper with children -->
<ul class="tabs tabs--basic">
<li class="tab" aria-label="Tab 1">
<p>These tabs, heavily inspried by the good work at <a href="https://chrome.dev/carousel/horizontal/tabs/" target="_blank">Chrome.dev CSS Carousel Gallery</a>, use a combination of Anchor Positioning, Scroll Snap and Scroll Markers to create a CSS-only tabbed content panel.</p>
<p>In supporting browsers, as you click each tab, the content panel below should just change. This is all CSS, no JS involved.</p>
<p>Maxime porro veritatis consequuntur blanditiis distinctio voluptate sint hic architecto, praesentium obcaecati! Voluptatibus porro ratione debitis, natus error quasi provident fugiat ut, hic eum quibusdam veniam dolore a. Veniam, dolore?</p>
</li>
<li class="tab" aria-label="Tab 2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, corporis alias. Eius optio iure, consectetur saepe itaque sed provident velit accusamus esse cum magni pariatur facere quisquam nulla placeat! Deleniti!</p>
<p>Saepe adipisci quibusdam nihil doloremque veritatis sunt ex, voluptatibus obcaecati? Dolor inventore natus distinctio delectus voluptatem saepe officia laboriosam corporis asperiores quo! Sint ipsum incidunt accusamus possimus rerum vitae mollitia.</p>
<p>Minima nam reprehenderit cum nihil error sed ipsam libero, exercitationem non in aperiam praesentium dicta expedita dolorem eveniet natus architecto molestiae velit voluptate doloremque dolores tempora totam porro officia. Architecto.</p>
<p>Omnis soluta labore libero dolorum earum, dolor, commodi cum beatae harum minus reiciendis dolores maxime, facere sapiente perferendis! Qui, laboriosam. Commodi tenetur veritatis culpa corrupti impedit magnam vitae nobis quidem!</p>
</li>
<li class="tab" aria-label="Tab 3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos optio expedita animi laudantium quasi sapiente, dolorum quo perferendis officia velit nemo reiciendis nostrum nihil ullam sed pariatur provident. Harum, itaque.</p>
<p>Minima nam reprehenderit cum nihil error sed ipsam libero, exercitationem non in aperiam praesentium dicta expedita dolorem eveniet natus architecto molestiae velit voluptate doloremque dolores tempora totam porro officia. Architecto.</p>
<p>Omnis soluta labore libero dolorum earum, dolor, commodi cum beatae harum minus reiciendis dolores maxime, facere sapiente perferendis! Qui, laboriosam. Commodi tenetur veritatis culpa corrupti impedit magnam vitae nobis quidem!</p>
<p>Odit, reiciendis blanditiis ut minus modi quis soluta odio aliquid alias facere ab non veritatis magnam, deleniti mollitia error esse iusto adipisci numquam velit? Reiciendis rerum aperiam ut cum perspiciatis?</p>
<p>Maxime porro veritatis consequuntur blanditiis distinctio voluptate sint hic architecto, praesentium obcaecati! Voluptatibus porro ratione debitis, natus error quasi provident fugiat ut, hic eum quibusdam veniam dolore a. Veniam, dolore?</p>
</li>
</ul>CSS
.tabs {
/* Because I chose to use a UL */
padding: 0;
/* Adding some color */
background: var(--green-med);
/* Initially create a multi-column grid */
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 1rem;
/* Hide tab content that is currently "offscreen" */
overflow-y: hidden;
/* Fixed height is not always appropriate, but highlights tab content can scroll within each tab panel */
block-size: 300px;
/* Give some space above for the "tabs" */
margin-block-start: 4rem;
/* Define where where the "tabs" go & behave */
scroll-marker-group: before;
scroll-snap-type: x mandatory;
/* Hide the horizontal scrollbar */
scrollbar-width: none;
/* Define the "tab" group */
anchor-name: --tabs-basic;
&::scroll-marker-group {
position-anchor: --tabs-basic;
/* Create the tabs layout */
display: flex;
column-gap: 1rem;
align-items: end;
justify-content: start;
/* Correlate & position the tab anchors */
position: absolute;
bottom: anchor(top);
left: anchor(left);
right: anchor(right);
}
}
.tab {
padding: 1rem;
overflow-y: scroll;
/* Define scroll snap to the start of each slide */
scroll-snap-align: start;
&::scroll-marker {
/* Create the "tab" content based on its `aria-label` */
content: attr(aria-label);
/* Make it look pretty... */
text-decoration: none;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
padding-inline: 1.5rem;
padding-block: 1rem;
background: var(--green-dark);
border: 1px solid var(--green-med);
border-bottom: none;
color: white;
}
/* Note that nesting `:target-current` doesn't work */
&::scroll-marker:target-current {
background: var(--green-med);
}
}JS
No JS required.Baseline
CodePen
See the Pen on CodePen.