Skip to content
Related Articles

Related Articles

Blaze UI Simple Menu

Improve Article
Save Article
  • Last Updated : 29 Apr, 2022
Improve Article
Save Article

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=
</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=
</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>


Output:

 

Reference: https://www.blazeui.com/components/menus


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!