Dropdown

Definition: A dropdown button is an element that withholds predefined selectable list items when its menu expands.

Turn a button into a dropdown toggle with some basic markup changes.


                                                        
                                                        
                                                            <div class="dropdown">
                                                          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton1">Default button</button>
                                                          <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1">
                                                            <li><a href="#">Action</a></li>
                                                            <li><a href="#">Another action</a></li>
                                                            <li><a href="#">Something else here</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">Separated link</a></li>
                                                          </ul>
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Large dropdowns

Just add .btn-lg class on the button.


                                                        
                                                        
                                                            <div class="dropdown">
                                                          <button type="button" class="btn btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default button</button>
                                                          <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1">
                                                            ...
                                                          </ul>
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Color variant - primary button

Just add .btn-primary class on the button.


                                                        
                                                        
                                                            <div class="dropdown">
                                                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton2">Primary button</button>
                                                          <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton2">
                                                            <li><a href="#">Action</a></li>
                                                            <li><a href="#">Another action</a></li>
                                                            <li><a href="#">Something else here</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">Separated link</a></li>
                                                          </ul>
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Disabled state

Just add .disabled class on the main div that is wrapping the button (.dropdown), on the parent or on button (.btn) or only the disabled attribute on the button tag.


                                                        
                                                        
                                                            <div class="dropdown disabled">
                                                          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton1">Default button</button>
                                                          <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1">
                                                            <li><a href="#">Action</a></li>
                                                            <li><a href="#">Another action</a></li>
                                                            <li><a href="#">Something else here</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">Separated link</a></li>
                                                          </ul>
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

 

Drop-up

For the dropdown there are 2 option available, one is down (the default), and the other option is up - .dropup


                                                        
                                                        
                                                            <div class="dropup">
                                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Simple button</button>
                                                          <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true">
                                                            <li><a href="#">Action</a></li>
                                                            <li><a href="#">Another action</a></li>
                                                            <li><a href="#">Something else here</a></li>
                                                            <li class="divider"></li>
                                                            <li><a href="#">Separated link</a></li>
                                                          </ul>
                                                        </div>
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.