Materialize CSS provides a dropdown facility that allows the user to choose one value from a set of given values in a list. To add a dropdown list to any button, it has to be made sure that the data-target attribute matches with the id in the <ul> tag.
The main class and attribute used in a dropdown are:
- The dropdown-content class is used to identify which <ul> tag should be made a Materialize dropdown component.
- The data-activates attribute is used to specify the id of the dropdown <ul> element.
Syntax:
HTML
< h5 >
< a class = 'dropdown-button btn green'
href = '#'
data-activates = 'dropdown1' >
Drop Me!
< i class = "large material-icons" >
arrow_drop_down
</ i >
</ a >
</ h5 >
|
In dropdown list following elements can be added:
- A divider is added by using the divider class. It can be added to an empty <li> tag to show a divider.
- Icons are added by using the material-icons class using the <i> tag. The icon to be used can be specified and it would be displayed next to the text of the list item.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< script type = "text/javascript" src =
</ script >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< h4 >Dropdown in Materialize:</ h4 >
< h5 >< a class = 'dropdown-button btn green'
href = '#' data-activates = 'dropdown1' >
Drop Me!
< i class = "large material-icons" >
arrow_drop_down
</ i >
</ a >
</ h5 >
< ul id = 'dropdown1' class = 'dropdown-content' >
< li >
< a href =
Collections
</ a >
</ li >
< li >
< a href =
Icons
</ a >
</ li >
< li class = "divider" ></ li >
< li >< a href = "#!" >Table</ a ></ li >
< li >
< a href = "#!" >
< i class = "material-icons" >
view_module
</ i >
Home
</ a >
</ li >
</ ul >
< script src =
</ script >
</ body >
</ html >
|
Output:
Last Updated :
15 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...