Onsen UI CSS Component Icon Tabbar

Last Updated : 23 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 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.

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 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> 
                <div class="tabbar__label"> 
                  Home 
                </div> 
            </button> 
        </label> 
  
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-search"></i> 
                <div class="tabbar__label"> 
                  Search 
                </div> 
            </button> 
        </label> 
  
        <label class="tabbar__item"> 
            <input type="radio" name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-person"></i> 
                <div class="tabbar__label"> 
                  Profile 
                </div> 
            </button> 
        </label> 
    </div> 
</body> 
</html>

Output:

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

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 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> 
                <div class="tabbar__label"> 
                    Settings 
                </div> 
            </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> 
                <div class="tabbar__label"> 
                    Analytics 
                </div> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio"
                   name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-link"></i> 
                <div class="tabbar__label"> 
                    Connect 
                </div> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" 
                   name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-home"></i> 
                <div class="tabbar__label"> 
                    Home 
                </div> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio" 
                   name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-search"></i> 
                <div class="tabbar__label"> 
                    Search 
                </div> 
            </button> 
        </label> 
        <label class="tabbar__item"> 
            <input type="radio"
                   name="tabbar-a"> 
            <button class="tabbar__button"> 
                <i class="tabbar__icon ion-ios-person"></i> 
                <div class="tabbar__label"> 
                    Profile 
                </div> 
            </button> 
        </label> 
    </div> 
</body> 
</html>