How to do bootstrap drop-down menu

The drop-down menu is a panel that displays a list of options, displayed by clicking or hovering triggers (buttons or links). Making the Bootstrap drop-down menu requires the following steps: Create a container and add the dropdown class. Add a trigger element (button or link) and add dropdown-toggle and data-toggle="dropdown" properties. Create an unordered list and add the dropdown-menu class. Add a list item that contains links or content to the list.

Bootstrap drop-down menu making guide

What is a drop-down menu?

The drop-down menu is an interactive component that displays a panel with a list of options when the user clicks or hovers.

How to make a Bootstrap drop-down menu?

To create a drop-down menu, the following HTML elements are required:

<li> <div> Container is used to wrap the drop-down menu<li> <code><button></button> or <a></a> elements as triggers, and the menu is displayed when the user clicks or hovers. <li> <ul></ul> Unordered list is used to include menu options <li> <li> List items are used to represent individual menu options

step:

<li> Create a <div> container and add <code>dropdown class.<li> Add the trigger element ( <button></button> or <a></a> ) inside the container and add dropdown-toggle and data-toggle="dropdown" properties. <li> Create an unordered list of <ul></ul> and add dropdown-menu class to that list. <li> Add a <li> list item in the <ul></ul> list and add a link or other content for each option.

Sample code:

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div></code>

Advanced options:

<li> Submenu: Create submenu using nested <ul></ul> and <li> elements. <li> Delimiter: Add <li role="separator" class="divider"> to separate menu items. <li> Title: Add <li role="heading" class="dropdown-header"> to create a title. <li> Disable Items: Add disabled attribute to disable menu items.

hint:

<li> Make sure the trigger element has aria-haspopup="true" and aria-expanded="false" properties for improved accessibility. <li> Use JavaScript to handle drop-down menu events (for example, show/hide menus). <li> Take advantage of Bootstrap documentation and component examples for more advanced usage.