I am using Angular 8, and I need to make a simple drop-down menu. The design that I have is like this:
But the only difference is that I don't want to use button-style, but need the chevron. Just a simple drop-down, where I can click on different links within that drop-down.
The thing I understood is, you need to remove the button style drop-down trigger and need to add a chevron icon instead.
I've added font-awesome css to the project by importing it to the styles.css file.
styles.css
/* Add application styles & imports to this file! */
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
app-component.html
<div class="container" style="margin-top: 10%">
<div class="btn-group" dropdown>
<span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
<i class="fa fa-chevron-down"></i>
</span>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-basic">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
You can add any additional styles to the chevron as you like.
