Open In App

Blaze UI Menus Colored Items

Improve
Improve
Like Article
Like
Save
Share
Report

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 and group items under an item in the menu.

Colored Menu: This type of menu has colored items that can have a color type of brand.

Blaze UI Menus Classes:

  • c-card–menu: It is used to specify that the container is intended for a menu.
  • c-card__control: It 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.
  • c-card__control–brand: This class is used to specify the colored item that can have a color type of brand.

Syntax:

<button class="c-card__control">...</button>

Example 1: In the below code, we will make use of the ‘c-card__control–brand’ class to specify the color brand to the element.

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>    
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
      
        <div role="menu" class="c-card c-card--menu">
            <button role="menuitem" 
                    class="c-card__control 
                           c-card__control--brand">
                    GfG
            </button>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: In the below code, we will make use of the ‘c-card__control–brand’ class to disable the color brand to the element using the disabled attribute.

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>
     <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
      
        <div role="menu" class="c-card c-card--menu">
            <button role="menuitem" 
                     class="c-card__control 
                            c-card__control--brand">
                GfG
            </button>
            <button role="menuitem" 
                    class="c-card__control 
                           c-card__control--brand" 
                    disabled>
                GfG disabled
            </button>
        </div>
    </center>
</body>
  
</html>


Output:

 

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



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