Blaze UI Menus
Last Updated :
11 May, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...