Open In App

Spectre Menu

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <link rel="stylesheet"
          href=
    <link rel="stylesheet"
          href=
</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:

Spectre Menu

Spectre Menu

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=
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet" 
          href=
</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:

Spectre Menu

Spectre Menu

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



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