Blaze UI Simple Menu
Blaze UI is a responsive front-end framework and a free open-source UI toolkit used to build web pages easily. It provides us with a great structure that helps us to build a robust and maintainable foundation for websites. All the components are developed keeping mobile responsiveness a priority, so they work on any screen size. It also gives us the freedom to integrate any other framework if we want to. With easy-to-use variables and mixins, it offers easy configuration of custom builds. It offers us a lot of components like accordions, autocomplete, avatars, breadcrumbs, etc which enables us to design and build web pages at ease.
Blaze UI Menu helps us to navigate different components in a list format. These components redirect us to the various linked pages in the websites or web applications.
Blaze UI Simple Menu classes:
- c-card–menu: This class is used to specify which container is intended for a menu.
- c-card__control: It specifies the components inside the menu.
- c-card__item–divider: This class is used to add a divider between items or components.
- c-card__control–active: It enumerates the component which is currently active or has been opened.
The disabled attribute is used to deactivate a component or menu item.
Syntax:
<div role="menu" class="c-card c-card--menu"> <button role="menuitem" class="c-card__control"> ... </button> ... <div role="separator" class= "c-card__item c-card__item--divider"> ... </div> </div>
Example 1: In the below example there is the code for a menu with a divider and a disabled item.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 >Blaze UI Simple Menu</ h3 > < div role = "menu" class = "c-card c-card--menu" > < button role = "menuitem" class = "c-card__control" > DSA </ button > < button role = "menuitem" class = "c-card__control" > Web Technologies </ button > < div role = "separator" class = "c-card__item c-card__item--divider" > Divider </ div > < button role = "menuitem" class = "c-card__control" > Interview Experience </ button > < button role = "menuitem" class = "c-card__control" > DSA Questions </ button > < button role = "menuitem" class = "c-card__control" disabled> Algorithms </ button > < button role = "menuitem" class = "c-card__control" > Competitive Programming </ button > < button role = "menuitem" class = "c-card__control" > C++ </ button > < button role = "menuitem" class = "c-card__control" > Java </ button > < button role = "menuitem" class = "c-card__control" > Python </ button > < button role = "menuitem" class = "c-card__control" > Machine learning </ button > </ div > </ body > </ html > |
Output:
Example 2: In this example, the code illustrates an active element in the menu using the c-card__control–active class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 >Blaze UI Simple Menu</ h3 > < div role = "menu" class = "c-card c-card--menu" > < button role = "menuitem" class = "c-card__control" > DSA </ button > < button role = "menuitem" class = "c-card__control" > Web Technologies </ button > < div role = "separator" class = "c-card__item c-card__item--divider" > Divider </ div > < button role = "menuitem" class = "c-card__control" > Interview Experience </ button > < button role = "menuitem" class = "c-card__control" > DSA Questions </ button > < button role = "menuitem" class = "c-card__control c-card__control--active" > Algorithms </ button > < button role = "menuitem" class = "c-card__control" > Competitive Programming </ button > < button role = "menuitem" class = "c-card__control" > C++ </ button > < button role = "menuitem" class = "c-card__control" > Java </ button > < button role = "menuitem" class = "c-card__control" > Python </ button > < button role = "menuitem" class = "c-card__control" > Machine learning </ button > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/menus
Contact Us