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/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 style = "color:green" >w3wiki</ 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