Open In App

Blaze UI Menus Combo

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a responsive front-end framework and a free open-source UI toolkit utilized to create sites easily. It provides us with a superb structure that helps us to make a robust and maintainable foundation for websites. All the components are developed keeping mobile responsiveness a priority so that they work on any screen size. It also gives us the freedom to integrate the opposite framework if we might wish to. With easy-to-use variables and mixins, it offers easy configuration of custom builds. It offers us plenty of components like accordions, autocomplete, avatars, breadcrumbs, etc which enables us to style and build sites comfortably.

Blaze UI Menu helps us to navigate distinct components during a list view. These components redirect us to the numerous linked pages within the websites or web applications. The Menu Combo lets us build a menu where we can put some inputs in the menu and we can select multiple selections in a menu. For making a combo menu we have to add a label element that specifies the space and type of the component and an input tag to have a checkbox for every element.

Used Classes:

  • c-card–menu: Used to specify which element is intended to become a menu.
  • c-card__control: This class specifies the choice inside the menu.
  • c-card__item–divider: It is used to add a divider between items or components.
  • c-field: It specifies that the element will be a choice.
  • c-field–choice: It defines the element to be a choice field.

Syntax:

<div role="menu" class="c-card c-card--menu u-high">
  <label role="menuitem" class="c-card__control 
      c-field c-field--choice">
    <input type="checkbox"> . . . .
  </label>
  <label role="menuitem" class="c-card__control 
      c-field c-field--choice">
    <input type="checkbox"> . . . .
  </label>
</div>

Example 1: The below example demonstrates a combo menu with a divider in between. 

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=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>    
    <title>Blaze UI Menus Combo</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Blaze UI Menus Grouped Items</h3>
    <div role="menu" class="c-card c-card--menu u-high">
        <label role="menuitem" class=
            "c-card__control c-field c-field--choice">
            <input type="checkbox"> DSA
        </label>
        <label role="menuitem" class=
            "c-card__control c-field c-field--choice">
            <input type="checkbox"> Web Technologies
        </label>
        <div role="separator" class=
             "c-card__item c-card__item--divider">Divider
        </div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Interview Experience
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Algorithms
        </label>
        <div role="separator" class=
             "c-card__item c-card__item--divider">Divider
        </div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Competitive Programming
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> DSA Questions
        </label>
    </div>
</body>
    
</html>


Output:
 

 

Example 2: The below code example demonstrates the Combo menu with grouped 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=
    <title>Blaze UI Menus Grouped Items</title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Blaze UI Menus Combo</h3>
    <div role="menu" class="c-card c-card--menu u-high">
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> DSA
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Web Technologies
        </label>
        <div role="separator" class="c-card__divider"></div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Interview Experience
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Algorithms
        </label>
        <div role="separator" class="c-card__divider"></div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Competitive Programming
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> DSA Questions
        </label>
        <div role="separator" class="c-card__divider"></div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Topic-wise Practice
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Interview Preparation
        </label>
        <div role="separator" class="c-card__divider"></div>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Machine Learning
        </label>
        <label role="menuitem" class=
               "c-card__control c-field c-field--choice">
            <input type="checkbox"> Java
        </label>
    </div>
</body>
  
</html>


Output:

 

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



Last Updated : 25 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads