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
Reference: https://picturepan2.github.io/spectre/components/menu.html
Last Updated :
30 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...