Developers
Authorization
API Resources
NL Interpreter
Search
Benti
Refinement Tabs
Refinement Tabs
The .inbenta-search-tabs__bar contains the list of tabs available.
Users can scroll through the tabs below the class .inbenta-search-tabs__scroll. When there is not enough space to display all tabs, an arrow is displayed on both sides to scroll to the right (.inbenta-search-tabs__scroll--next) or left (.inbenta-search-tabs__scroll--previous), depending on the tab currently in focus.
There are three different tab states:
- Normal (
.inbenta-search-tabs__item): The tab is clickable. - Active: Adds the class
.inbenta-search-tabs__item--activewhen a tab is clicked. This removes the last active tab class. - Disable: Adds the class
.inbenta-search-tabs__item--disabledwhen there is no contents related with a tab.
Within (.inbenta-search-tabs__item__link): has three types of information:
.link__text: The name of the tab content..link__badge: The number of results in the tab..link__icon: An icon to represent the tab.
Component image
HTML structure
<div class="inbenta-search-tabs">
<div class="inbenta-search-tabs__button inbenta-search-button-icon inbenta-search-tabs__button--disabled">
<i class="inbenta-search-tabs__scroll inbenta-search-tabs__scroll--previous inbenta-search-tabs__scroll inbenta-search-tabs__scroll--disabled inbenta-search-icon"></i>
</div>
<ul class="inbenta-search-tabs__bar">
<li class="inbenta-search-tabs__item inbenta-search-tabs__item--active">
<a class="inbenta-search-tabs__item__link" href="#">
<span class="link__icon inbenta-search-icon"></span>
<span class="link__text">All results</span>
<small class="link__badge">1749</small>
</a>
</li>
<li class="inbenta-search-tabs__item inbenta-search-tabs__item">
<a class="inbenta-search-tabs__item__link" href="#">
<span class="link__icon inbenta-search-icon"></span>
<span class="link__text">>Example tab</span>
<small class="link__badge">2</small>
</a>
</li>
<li class="inbenta-search-tabs__item inbenta-search-tabs__item inbenta-search-tabs__item--disabled">
<a class="inbenta-search-tabs__item__link" href="#">
<span class="link__icon inbenta-search-icon"></span>
<span class="link__text"> >Example tab disabled</span>
<small class="link__badge">0</small>
</a>
</li>
</ul>
<div class="inbenta-search-tabs__button inbenta-search-button-icon"><i class="inbenta-search-tabs__scroll inbenta-search-tabs__scroll--next inbenta-search-tabs__scroll inbenta-search-icon"></i></div>
</div>CSS editable properties
| Class | Css |
|---|---|
.inbenta-search-tabs |
structural, position, height |
.inbenta-search-tabs__button .inbenta-search-button-icon |
structural, position, padding, background, border |
.inbenta-search-tabs__scroll--next:before, .inbenta-search-tabs__scroll--previous:before |
font, content, color |
.inbenta-search-tabs__bar |
position, structural, padding,background, border, transition |
.inbenta-search-tabs__item |
structural, list-style, pseudo-class(hover) |
.inbenta-search-tabs__item--active inbenta-search-tabs__item__link |
background, color, box-shadow |
.inbenta-search-tabs__item--disabled inbenta-search-tabs__item__link |
cursor, background, color, box-shadow, border |
.inbenta-search-tabs__item__link |
structural, position, height, padding, background, border, box-shadow, color, text-decoration, font |
.inbenta-search-tabs__item__link .link__text |
font, color |
.inbenta-search-tabs__item__link .link__badge |
margin, padding, background, border, font, color |
.inbenta-search-tabs__item__link .link__icon |
generic, margin, color |