# Dropdown / Side Nav

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v2.1/components.html#dropdown-wrapper)

### Example

<div align="left"><img src="https://131633009-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZRJugU4W9Q5icKqucU%2F-MZRK78vmoyYDUlTc_Q3%2Fimage.png?alt=media&#x26;token=be38fe39-e3f0-42b3-868f-4f20f0b8b467" alt=""></div>

```html
<div class="row">
  <div class="col-md-4 col-lg-3">
    <div class="side-nav">
      <ul>
        <li><a href="#"><span>Main menu(no icon)</span></a></li>
        <li class="dropdown-cust"><a href="javascript:void(0)" class="dropdown-toggle-cust"><span>Main menu + sub nav (no icon)</span></a>
          <div class="dropdown-menu-cust"> <a class="dropdown-item active" href="#">Sub menu one</a> <a class="dropdown-item" href="#">Sub menu two</a> <a class="dropdown-item" href="#">Sub menu three</a> </div>
        </li>
        <li><a href="#"><i class="fal fa-briefcase"></i><span>Main menu(has icon)</span></a></li>
        <li class="dropdown-cust"><a href="javascript:void(0)" class="dropdown-toggle-cust"><i class="fal fa-briefcase"></i><span>Main menu + sub nav (has icon)</span></a>
          <div class="dropdown-menu-cust"> <a class="dropdown-item active" href="#">Sub menu one</a> <a class="dropdown-item" href="#">Sub menu two</a> <a class="dropdown-item" href="#">Sub menu three</a> </div>
        </li>
      </ul>
    </div>
  </div>
</div>
```

### When to use

**Dropdowns should be used:**

* When you have limited space or your list is too long.
* For example, having more than 7 items in a predetermined list.
* For bringing users to a different page, or section within a page.

**Dropdowns should not be used:**

* When requiring users to select from a predetermined list of answers.
* Better alternatives would be the checkbox or radios component.
* for including checkboxes as users may not know how to select multiple options presented to them in a dropdown.
