Skip to content
Related Articles

Related Articles

Blaze UI Menus

View Discussion
Improve Article
Save Article
  • Last Updated : 11 May, 2022
View Discussion
Improve Article
Save Article

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Menus are used to list items or used as replacements for dropdown elements. We can list single elements as well as group items under an item in the menu.

Blaze UI Menu Types:

  • Simple Menu: This is a simple menu with a simple CSS that contains the items as blocks of items.
  • Grouped Items Menu: This menu has the items grouped and separates from another category of items in the menu.
  • Coloured Menu: This type of menu has colored items that can have a color type of brand.
  • Combo Menu: This type of menu contains items that can have inputs.

Blaze UI Menus Classes:

  • c-card–menu: This class is used to specify that the container is intended for 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.
  • c-card__control–active: It specifies the component which is currently active or has been opened.

Syntax:

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

Example 1: In the following example, we have a list of items in the simple menu with links 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" />
    <title> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br> <br>
  
            <div role="menu" class="c-card c-card--menu">
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control"
                   href=
                    Data Structures
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
                    Algorithms
                </a>
                  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
                    Machine Learning
                </a>
  
                <button role="menuitem" 
                        class="c-card__control" 
                        disabled >
                    And much more
                </button>
            </div>
        </center>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the following example, we have a grouped 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" />
    <title> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br />
            <br />
        </center>
  
        <div role="menu" class="c-card c-card--menu">
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
                Data Structures
            </a>
  
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
                Algorithms
            </a>
  
            <a target="_blank" role="menuitem" 
               class="c-card__control" href=
                Machine Learning
            </a>
              
            <div role="separator" 
                 class="c-card__divider">
            </div>
  
            <button role="menuitem" 
                    class="c-card__control">
                Java
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                C++
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                Python3
            </button>
            <button role="menuitem" 
                    class="c-card__control">
                Javascript
            </button>
  
            <div role="separator" 
                 class="c-card__divider">
            </div>
  
            <button role="menuitem" 
                    class="c-card__control" 
                    disabled>
                And much more
            </button>
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 3: In the following example, we have a menu group inside the menu containing different programming languages separated by a divider and containing two combos 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" />
    <title> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Blaze UI Menus
            </strong>
            <br> <br>
  
            <div role="menu" class="c-card c-card--menu">
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
                    Data Structures
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
                    Algorithms
                </a>
  
                <a target="_blank" 
                   role="menuitem"
                   class="c-card__control" 
                   href=
                    Machine Learning
                </a>
  
                <div role="separator" 
                     class="c-card__divider">
                </div>
  
                <label role="menuitem" 
                       class="c-card__control 
                       c-field c-field--choice">
                    <input type="checkbox" />
                    Python3
                </label>
  
                <label role="menuitem" 
                       class="c-card__control 
                       c-field c-field--choice">
                    <input type="checkbox" />
                    Java
                </label>
  
                <div role="separator" 
                     class="c-card__divider">
                </div>
            </div>
        </center>
    </div>
</body>
  
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!