+
+
+
+
+Mono provides a variety of Bootstrap dropdowns components with a + little customization that suits its design standards. For more information, please see the official Bootstrap documentation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Primary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Secondary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Success
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Info
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static"> Warning
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static"> Danger
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single primary button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-primary">Primary</button>
+ <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single secondary button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-secondary">Secondary</button>
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single success button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-success">Success</button>
+ <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single info button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-info">Info</button>
+ <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single warning button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-warning">Warning</button>
+ <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single danger button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-danger">Danger</button>
+ <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Primary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single secondary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Secondary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single success button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-success btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Success
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single info button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-info btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Info
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single warning button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-warning btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Warning
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single danger button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Danger
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Primary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single secondary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Secondary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single success button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Success
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single info button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ Info
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single danger button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static"> Warning
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single primary button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-primary">Primary</button>
+ <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single secondary button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-secondary">Secondary</button>
+ <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single success button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-success">Success</button>
+ <button type="button" class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single info button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-info">Info</button>
+ <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single warning button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-warning">Warning</button>
+ <button type="button" class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+<!-- Example single danger button -->
+<div class="btn-group mb-1">
+ <button type="button" class="btn btn-outline-danger">Danger</button>
+ <button type="button" class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false" data-display="static">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <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>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single primary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-primary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Primary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single secondary button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Secondary
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single success button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-success btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Success
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single info button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-info btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Info
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single warning button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-warning btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Warning
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+<!-- Example single danger button -->
+<div class="dropdown d-inline-block mb-1">
+ <button class="btn btn-outline-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
+ Danger
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+