Menu

Tabs - Scroll shadows

<div class="mp c-tabs c-tabs--anchor">
<nav class="c-tabs__controls u-scroll-shadows--h">
<ul class="c-tabs__controls-list">
<li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Primary materials</a></li>
<li><a class="c-tabs__control " href="#tab-2">Pharmaceuticals</a></li>
<li><a class="c-tabs__control " href="#tab-3">Advanced materials</a></li>
<li><a class="c-tabs__control " href="#tab-4">Academia</a></li>
<li><a class="c-tabs__control " href="#tab-5">Connected world</a></li>
</ul>
</nav>
<div class="c-tabs__content">
<div id="tab-1" class="c-tab c-tab--active">
<h2 class="c-h c-h--step-3">Primary materials</h2>
</div>
<div id="tab-2" class="c-tab ">
<h2 class="c-h c-h--step-3">Pharmaceuticals</h2>
</div>
<div id="tab-3" class="c-tab ">
<h2 class="c-h c-h--step-3">Advanced materials</h2>
</div>
<div id="tab-4" class="c-tab ">
<h2 class="c-h c-h--step-3">Academia</h2>
</div>
<div id="tab-5" class="c-tab ">
<h2 class="c-h c-h--step-3">Connected world</h2>
</div>
</div>
</div>
{
"type": "anchor",
"tabs": [
{
"id": "tab-1",
"label": "Primary materials",
"content": "<h2 class=\"c-h c-h--step-3\">Primary materials</h2>",
"active": true
},
{
"id": "tab-2",
"label": "Pharmaceuticals",
"content": "<h2 class=\"c-h c-h--step-3\">Pharmaceuticals</h2>"
},
{
"id": "tab-3",
"label": "Advanced materials",
"content": "<h2 class=\"c-h c-h--step-3\">Advanced materials</h2>"
},
{
"id": "tab-4",
"label": "Academia",
"content": "<h2 class=\"c-h c-h--step-3\">Academia</h2>"
},
{
"id": "tab-5",
"label": "Connected world",
"content": "<h2 class=\"c-h c-h--step-3\">Connected world</h2>"
}
],
"shadows": true
}

Props

Name Type Description
type string The type of tab, eg: "anchor"
tabs tab[] An array of tabs

tab

Name Type Description
id string Unique ID for each tab
label string Label for the tab control
content html HTML for the tab content
active bool Is this tab active?

CSS modifiers

Name Description
c-tabs--flex Instead of 'block', display the active tabs as 'flex'
c-tabs--persist Add a URL fragment (aka hashtag) to the browser URL

Utilities

Name Description
u-scroll-shadows--h When the tab row is too wide for the screen, scroll indicators are displayed