Onsen UI CSS Component Icon Only Tabbar

Last Updated : 13 Jun, 2022

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 allows you to create a navigation bar with tabs for easy navigation. This is commonly used to create a navigation bar for a mobile user interface. The Icon Only Tabbar is a form of the tab bar in which only icons can be added to all of the navigation tabs and there will be no textual title to the tab.

Onsen UI CSS Component Icon Only Tabbar Used Classes:

tabbar: This class is added to the whole 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.

Syntax:

<div class="tabbar">
    <label class="tabbar__item">
        <input>
        <button class="tabbar__button">
            <i class="tabbar__icon"></i>
        </button>
    </label>
</div>

Example: This code below demonstrates the Icon-only tab bar using the above-mentioned classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <link href= 
"https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div style="margin: 2rem; font-family: Roboto, sans-serif;"> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3 style="margin-top: -1.5rem;"> 
          Onsen UI CSS Component Icon Only Tabbar 
        </h3> 
        <br /> 
    </div> 
    <div class="tabbar"> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a" 
                   checked="checked"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-home"></i> 
            </button> 
        </label> 
  
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-search"></i> 
            </button> 
        </label> 
  
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-person"></i> 
            </button> 
        </label> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This code below demonstrates the Icon-only tab bar using the above-mentioned classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <link href= 
"https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div style="margin: 2rem; font-family: Roboto, sans-serif;"> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <h3 style="margin-top: -1.5rem;"> 
          Onsen UI CSS Component Icon Only Tabbar 
        </h3> 
        <br /> 
    </div> 
    <div class="tabbar"> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-menu"></i> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a" 
                   checked="checked"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-stats"></i> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-link"></i> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-home"></i> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-search"></i> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-person"></i> 
            </button> 
        </label> 
    </div> 
</body> 
  
</html>