Blaze UI Simple Menu

Last Updated : 29 Apr, 2022

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">GeeksforGeeks</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">GeeksforGeeks</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>