Blaze UI Menus Combo
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.
- 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.
<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.
Example 2: The below code example demonstrates the Combo menu with grouped items.