Spectre Menu

The Spectre Menu is an important component of an interactive website. A menu is the collection of items that allow users to choose a value from the list. 

The Spectre Menu contains the default menu and the dropdown menu. The Spectre Dropdown Menu is used to add a dropdown. You need to add a container element with the dropdown class and add a focusable element with the dropdown-toggle class for the button and a menu. If one wants the default menu then there is no need to use dropdown classes.

Spectre Menu Types:

• Spectre Default Menu: This is the default menu option, in this type we can use checkbox, radio etc.
• Spectre Dropdown Menu: This is a dropdown option, same as default but in the dropdown facility.

Spectre Menu Classes:

• menu: This class is used to holds the items in a container that's the menu.
• menu-item: This class is used to create menu items,

Syntax:

<ul class="menu">
 <li class="menu-item">
 ...
 </li>
 ...
</ul>

The below examples illustrate the Spectre Menu:

Example 1: In this example, we will create a simple menu.

Output:

👁 Spectre Menu

Example 2: In this example, we will create a dropdown menu that will also have a checkbox.

Output:

👁 Spectre Menu

Reference: https://picturepan2.github.io/spectre/components/menu.html