Use the .c-tab components for consistent tab styling. See the Garden React <Tabs> component for enhanced keyboard and event behavior along with support for dynamic panel content.

Default Layout .c-tab.is-rtl

Block Layout .c-tab.is-rtl.c-tab--block

Tab State

Anchor Tabs

Playground

<nav class="c-tab"> <ul class="c-tab__list"> <li aria-controls="panel1" aria-expanded="true" aria-selected="true" class="c-tab__list__item is-selected" id="tab1" role="tab" tabindex="0">One</li ><li aria-controls="panel2" aria-expanded="false" aria-selected="false" class="c-tab__list__item" id="tab2" role="tab" tabindex="-1">Two</li ><li aria-controls="panel3" aria-expanded="false" aria-selected="false" class="c-tab__list__item" id="tab3" role="tab" tabindex="-1">Three</li> </ul> <p aria-hidden="false" aria-labelledby="tab1" class="c-tab__panel u-p" id="panel1" role="tabpanel">PANEL ONE</p> <p aria-hidden="true" aria-labelledby="tab2" class="c-tab__panel u-p" id="panel2" role="tabpanel">PANEL TWO</p> <p aria-hidden="true" aria-labelledby="tab3" class="c-tab__panel u-p" id="panel3" role="tabpanel">PANEL THREE</p> </nav>