Spectre Dropdown Menu

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

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 component right next to it. You also need to add tabindex to make the buttons focusable.

Spectre Dropdown menu class:

dropdown: This class is used to create a dropdown component.
active: This class will make your dropdown in active mode.
dropdown-toggle: This class is used to make the dropdown toggleable.
menu: This class is used to create a list of options that dropdowns can have.
dropdown-right: This class is used to prevent the dropdown from appearing off-screen.

Note: The tabindex attribute is used to make the buttons focusable.

Syntax:

<div class="dropdown">
  <a href="#" class="dropdown-toggle" tabindex="0">
    ....
  </a>
  <ul class="menu">
    ...
  </ul>
</div>

Example: Below example illustrates the Spectre Dropdown menu.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Dropdown menu Class</title>
    <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 Dropdown menu Class</strong>
    </center>
    <br><br>
    <strong>Basic Dropdown Button:</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</li>
            <li>Linked List</li>
            <li>Stacks</li>
            <li>Queues</li>
            <li>Trees</li>
            <li>Graphs</li>
          </ul>
        </div>
        <br><br>
        <strong>Dropdown Button Group:</strong>
        <div class="dropdown">
          <div class="btn-group">
            <a href="#" class="btn">
              DSA Course-1
            </a>
            <a href="#" class="btn dropdown-toggle">
              <i class="icon icon-caret"></i>
            </a>

            <ul class="menu">
                <li>Array</li>
                <li>Linked List</li>
                <li>Stacks</li>
                <li>Queues</li>
                <li>Trees</li>
                <li>Graphs</li>
            </ul>
          </div>
        </div>        
</body>
</html>

Output:

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

Explore