Navigation Tabs CSS Component
A navigation tab looks like a normal tab, but is actually a hyperlink to a new page. Therefore a set of navigation tabs behaves more like a simple navigational widget, rather than a dynamic user interface control.
If HREF is not present, then the tab will be in disabled state. A value of "javascript" (or any such variant) is not a valid URL!
The aria-current attribute is used to programmatically denote the current page state and current link.
Use child element modifier navigation-tabs--large to opt into larger font-size for navigation tabs.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="navigation-tabs">
<ul class="navigation-tabs__items">
<li class="navigation-tabs__item">
<a aria-current="page" href="https://www.ebay.com"> Page 1 </a>
</li>
<li class="navigation-tabs__item">
<a href="https://www.ebay.com"> Page 2 </a>
</li>
<li class="navigation-tabs__item">
<a href="https://www.ebay.com"> Page 3 </a>
</li>
</ul>
<div class="navigation-tabs__content">
<div class="navigation-tabs__cell">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda
culpa est nisi porro quae quidem ratione repellendus, temporibus.
Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus
quos ut?
</p>
</div>
</div>
</div>