Onsen UI CSS Component Icon Tabbar

Onsen UI is a free open-source HTML5 framework for creating innovative and usable user interfaces (UI). It also simplifies user interface design, letting app developers concentrate on the program's functionality.

The Tabbar is a CSS component that can be used to build a navigation bar that will have tabs for navigation. This is mostly used in making a navigation bar for a mobile UI. The Icon Tabbar is a type of tab bar where we can add icons along with labels in all the navigation tabs.

Onsen UI CSS Component Icon Tabbar Classes:

• tabbar: This class is added to the whole HTML div container that will hold the whole navigation bar.
• tabbar__item: This class is added to the tabs of the navigation bar.
• tabbar__button: This class is added to the button elements which can be clicked to change the tabs of the navigation bar. 
• tabbar__icon: This class is added to the icons of the button elements which can be clicked to change the tabs of the navigation bar.
• tabbar__label: This class is added to specify the name of each tab of the navigation bar.

Syntax:

<div class="tabbar">
 <label class="tabbar__item">
 <input type="radio" name="tabbar-a" checked="...">
 <button class="tabbar__button">
 <i class=""></i>
 <div class="tabbar__label"></div>
 </button>
 </label>
</div>

Example 1: In this example, we will use the Onsen UI CSS Component Icon Tabbar for creating the User Interface.

Output:

Example 2: In the below example, you can see we can add numerous icons to the tabbar.

Output:

Reference: https://onsen.io/v2/api/css.html#tabbar-category