CODEWITHSUNDEEP
javascriptcssangulartwitter-bootstrap-3drop-down-menu
Ana
Ana

Reputation: 165

How to make the bootstrap drop-down without using button? (Angular 4+)

I am using Angular 8, and I need to make a simple drop-down menu. The design that I have is like this:

StackBlitz

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.

Upvotes: 0

Views: 1668

Answers (1)

Anzal Khan
Anzal Khan

Reputation: 61

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.

Upvotes: 1

Related Questions