Menus

This UI Kit is dedicated to Bootstrap 4 & Material Design.

Discover the latest Kit for Bootstrap 5 & Material Design 2.0! GET BOOTSTRAP 5 KIT FOR FREE

Bootstrap users know these as dropdowns, but these are also known as menus in the Material Design specification.

Contents
Styles
Alignment
- Lower left side
- Lower right side
Widths
- Minimum width
- Maximum width

Styles

Icon with buttons

<div class="dropdown">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex1">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item disabled" type="button">Another action</button>
    <button class="dropdown-item" type="button">Another action</button>
  </div>
</div>

Icon with links

<div class="btn-group">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>  
  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex2">
    <a class="dropdown-item" href="#">Regular link</a>
    <a class="dropdown-item disabled" href="#">Disabled link</a>
    <a class="dropdown-item" href="#">Another link</a>
  </div>
</div>

Small fab

<div class="btn-group">
  <button class="btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu  dropdown-menu-left" aria-labelledby="ex3">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
  </div>
</div>

Default fab

<div class="btn-group">
  <button class="btn bmd-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex4">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
  </div>
</div>

Default button

<div class="btn-group">
  <button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="buttonMenu1">
    <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>
</div>

Alignment

Lower left side

<div class="btn-group">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ll1">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item disabled" type="button">Disabled action</button>
    <div class="dropdown-divider"> </div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Lower right side

<div class="dropdown pull-xs-right">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item disabled" type="button">Disabled action</button>
    <div class="dropdown-divider"> </div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Widths

Minimum width

<div class="btn-group pull-xs-right">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu" aria-labelledby="mw1">
    <button class="dropdown-item" type="button">A</button>
    <button class="dropdown-item" type="button">B</button>
  </div>
</div>

Maximum width

<div class="btn-group pull-xs-right">
  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons">more_vert</i>
  </button>
  <div class="dropdown-menu" aria-labelledby="mw2">
    <button class="dropdown-item" type="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</button>
    <button class="dropdown-item" type="button">Another action</button>
  </div>
</div>