Onsen UI CSS Component Material Toolbar Last Updated : 28 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Material Toolbar. The toolbar is a horizontal bar with some toolbar items and icons. Onsen UI CSS Component Material Toolbar is used to create the material toolbar using the below classes. Onsen UI CSS Component Material Toolbar Classes: toolbar--material: This class is used to create the material toolbar.toolbar--material__center: This class is used to create the material toolbar in the center.toolbar--material__left: This class is used to create the material toolbar on the left.toolbar--material__right: This class is used to create the material toolbar on the right. Syntax: <div class="toolbar toolbar--material"> ... </div> Example 1: The following example demonstrates the Onsen UI CSS Component Material Toolbar. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Toolbar </strong> <br> <br> <div class="toolbar toolbar--material"> <div class="toolbar__center toolbar--material__center"> GeeksforGeeks </div> </div> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component Material Toolbar. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Toolbar </strong> <br> <br> <div class="toolbar toolbar--material"> <div class="toolbar__left toolbar--material__left"> Menu </div> <div class="toolbar__center toolbar--material__center"> Home </div> <div class="toolbar__right toolbar--material__right"> Logout </div> </div> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#toolbar-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component Material Tabbar H harendra4373 Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component Material Tabbar Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to rapidly create adaptive and attractive user inte 2 min read Onsen UI CSS Component Material Toolbar Button Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component Material Toolbar Button is used to create the material toolbar buttons using the toolbar-button--m 2 min read Onsen UI CSS Component Toolbar Item Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Toolbar Item. The toolbar is a horizontal bar with some toolbar i 2 min read Onsen UI CSS Component Material Toolbar with Icons Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Material Toolbar with Icons. The toolbar is a horizontal bar with 2 min read Onsen UI CSS Component Material Range Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component Material Range is used to create the material range slider to set any value by dragging the handle 2 min read Onsen UI Toolbar CSS Components Onsen UI is an open-source, free tool for building distinctive and functional UIs. Additionally, it speeds up UI creation, letting app developers concentrate on the functionality of the software. Onsen UI is a sizable collection of strong user interface elements created especially for mobile apps. I 4 min read Like