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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>SPECTRE Menu</strong>

        <br><br>
        <strong>Spectre Default Menu:</strong>
        <div class="btn-group">
            <ul class="menu">
                <li>Choose the Topics of DSA</li>
                <li class="divider"></li>
                <li class="menu-item">Linked List</li>
                <li class="menu-item">Stacks</li>
                <li class="menu-item">Queues</li>
                <li class="menu-item">Trees</li>
                <li class="menu-item">Graphs</li>
            </ul>
        </div>
    </center>
</body>

</html>

Output:

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

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>SPECTRE Menu</strong>
        <br><br>
        <strong>Spectre Dropdown Menu:</strong>
        <div class="dropdown">
            <a href="#" class="btn btn-success dropdown-toggle">
                DSA Course <i class="icon icon-caret"></i>
            </a>
            <ul class="menu">
                <li>Array
                    <input type="checkbox">
                </li>
                <li>Linked List
                    <input type="checkbox">
                </li>
                <li>Stacks
                    <input type="checkbox">
                </li>
                <li>Queues
                    <input type="checkbox">
                </li>
                <li>Trees
                    <input type="checkbox">
                </li>
                <li>Graphs
                    <input type="checkbox">
                </li>
            </ul>
        </div>
    </center>
</body>

</html>

Output:

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

Explore