Bootstrap 4 - 单击图标后带有菜单的左侧边栏

Question

example photo sidebar

I looking for solution for create sidebar like on above photo.

photo2

After click icon sidebar then display menu.

I have somelike this but I need to add extra menu after click like first screen:

https://www.codeply.com/p/yRugA2FB3I

Answer 1

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
      Dropdown link
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>

Put this as dropdown list, try to edit css of the dropdown item.

or use this as well:

   <!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

it is the element of bootstrap 4 that do dropdown on the right.