Open In App

Spectre Dropdown Menu

Improve
Improve
Like Article
Like
Save
Share
Report

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

Spectre Dropdown menu

Spectre Dropdown menu

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



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