Blaze UI Menus Grouped Items

Last Updated : 28 Apr, 2022

Blaze UI is a responsive front-end framework and a free open-source UI toolkit utilized to build web pages easily. It provides us with an excellent structure that helps us to create a strong and maintainable foundation for websites. All the components are developed keeping mobile responsiveness a priority, in order that they work on any screen size. It also gives us the liberty to integrate the other framework if we would like to. With easy-to-use variables and mixins, it offers easy configuration of custom builds. It offers us tons of components like accordions, autocomplete, avatars, breadcrumbs, etc which enables us to style and build sites comfortably.

Blaze UI Menu helps us to navigate different components in a list view. These components redirect us to the varied linked pages within the websites or web applications. The Grouped Items is a way to present the components, it can be used to group similar components or options together. To group the items in a menu we have to add a separator above and below the items or components which we want to group together.

Blaze UI Menus Grouped Items classes:

c-card–menu: This class is used to specify which container is intended for a menu.
c-card__control: This class specifies the components inside the menu.
c-card__item–divider: It is used to add a divider between items or components.
c-card__control–active: It specifies the component which is currently active or has been opened.

To add a separator we have to add the c-card__item–divider class to an HTML div element and give the value of the role attribute as a separator.

Syntax:

div role="menu" class="c-card c-card--menu">
  <div role="separator" class="c-card__divider"></div>
  <button role="menuitem" class="c-card__control">
      ...
  </button>
  .... 
</div>

Example 1: The code below groups two menu items.

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 Menus Grouped Items</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>
        <div role="separator" class="c-card__divider"></div>
        <button role="menuitem" class="c-card__control">
           Competitive Programming
        </button>
        <button role="menuitem" class="c-card__control">
           C++
        </button>
        <div role="separator" class="c-card__divider"></div>
        <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: The code below groups an active and a disabled menu 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 Menus Grouped Items</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>
        <div role="separator" class="c-card__divider"></div>
        <button role="menuitem" class=
                "c-card__control c-card__control--active">
             Algorithms
        </button>
        <button role="menuitem" class="c-card__control" disabled>
             Competitive Programming
        </button>
        <div role="separator" class="c-card__divider"></div>
        <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>