Please note, this is a STATIC archive of website www.javatpoint.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
Javatpoint Logo
Javatpoint Logo

Bootstrap 5 Dropdowns

Bootstrap 5 Dropdowns are contextual overlays that can be toggled to display lists of links and other information. It is a deliberate design decision; the hovering effect cannot toggle them. The supplied Bootstrap dropdown JavaScript plugin renders them interactive.

Bootstrap 5 dropdowns are designed to be generic and suitable for various circumstances and markup structures. For example, it is possible to design dropdowns containing additional inputs and form controls, such as search fields or login forms.

Basic Dropdown

The "dropdown" class works to create the format of the dropdown menu. Use a button or link with the class "dropdown-toggle" and the data-bs-toggle = "dropdown" property to display the dropdown menu.

To actually create the dropdown menu, add the ".dropdown-menu" class in a <div> element. Add the "dropdown-item" class to each link or button within the dropdown menu.

Syntax

The following syntax shows default dropdown on the web page.

Examples

The following example shows default dropdown using bootstrap 5 classes. We use button to click on the dropdown menu. After clicking on the button dropdown displays item list.

Output

The following image shows the bootstrap 5 dropdown function with the information.

Bootstrap 5 Dropdowns

Dropdown with Anchor tag

The "dropdown" class works to create a basic dropdown menu function. Use a link such as a <a> tag with the class "dropdown-toggle" and the data-bs-toggle = "dropdown" property to display the dropdown items.

Syntax

The following syntax shows default dropdown with link on the web page.

Examples

The following example shows basic dropdown with link using bootstrap 5 classes. We use <a> tag to click on the dropdown menu. After clicking on the button dropdown displays item list.

Output

The following image shows the basic dropdown function with the information.

Bootstrap 5 Dropdowns

Dropdown Driver

The "dropdown-divider" uses to separate dropdown items using horizontal lines. This class uses the dropdown item using the <li> tag. We can place the dropdown driver where the item needs to separate and look authentic.

Syntax

The following syntax shows active dropdown item on the web page.

Example

The following example shows default dropdown with the "dropdown-driver" function using bootstrap 5 classes.

Output

The following image shows the bootstrap 5 dropdown driver function.

Bootstrap 5 Dropdowns

Active and Disabled Dropdown item

Bootstrap 5 dropdown uses an interactive user function using keywords. This function uses the "active" keyword to show the active item of the dropdown list. The dropdown uses the "disabled" keyword to display the disabled item of the dropdown list. The "active" and "disabled" keyword comes with the "dropdown-item" class in the <li> element.

Syntax

The following syntax shows active dropdown item on the web page.

The following syntax shows active dropdown item on the web page.

Example

The following example shows default dropdown with the active and disabled item using bootstrap 5 classes. Here, we place active keyword to the first item and disabled to the last item.

Output

The following image shows the bootstrap 5 dropdown function with the active and disabled items.

Bootstrap 5 Dropdowns

Dropdown Header

The "dropdown-header" displays the heading or title of the item list. This class uses the dropdown item in the heading tag. We can place the dropdown header as per requirement in the dropdown list.

Syntax

The following syntax shows dropdown item with header on the web page.

Examples

The following example shows default dropdown with the header function using bootstrap 5 classes.

Output

The follow ing image shows the bootstrap 5 dropdown header function.

Bootstrap 5 Dropdowns

Dropdown with End position

The "dropdown" class works with the "dropend" class in the <div> tag. The "dropend" class shows the dropdown item right side position or end position of the button.

Syntax

The following syntax shows a dropdown with the "dropend" content on the web page.

Examples

The following example shows a dropdown with the end position of the item on the web page. We can see a dropdown menu with items on the button's right side.

Output

The following image shows the bootstrap 5 dropdown with the "dropend" function.

Bootstrap 5 Dropdowns

Dropdown with start position

The "dropdown" class works with the "dropstart" classes in the <div> tag. The "dropstart" class shows the dropdown item left side of the start position of the button.

Syntax

The following syntax shows a dropdown with the "dropend" content on the web page.

Examples

The following example shows dropdown with the start position of item on the web page. We can see dropdown menu with item shows left side of the button.

Output

The following image shows the bootstrap 5 dropdown with the "dropstart" function.

Bootstrap 5 Dropdowns

Dropdown with up position

The "dropup" class uses in the html element such as a <div> tag. this class does not require a "dropdown" class. The "dropup" class shows an upside-down item on the top side of the button. The "dropup" requires some space or content above the dropdown button.

Syntax

The following syntax shows a dropdown with the "dropup" content on the web page.

Examples

The following example shows dropdown with the "dropup" class on the web page. The dropdown menu with item shows upside of the button.

Output

The following image shows the bootstrap 5 dropdown with the "dropup" function.

Bootstrap 5 Dropdowns

Dropdown with Menu Position

The "dropdown" class works with the "dropdown-menu-end" class in the <div> tag. The "dropdown-menu-end" class shows dropdown menus on the button's right side or end position. If we want to display a dropdown menu on the start or left side, then use the "dropdown-menu-start" class.

Syntax

The following syntax shows a dropdown with the "dropdown-menu-end" content on the web page.

The following syntax shows a dropdown with the "dropdown-menu-start" content on the web page.

Examples

The following example shows dropdown with the dropdown menu at required position on the web page. The first dropdown shows dropdown menu at right position. The second dropdown button shows dropdown menu at left position.

Output

The following image shows the bootstrap 5 dropdown with the required position of the dropdown menu.

Bootstrap 5 Dropdowns

Dropdown with Text

The "dropdown-item-text" class works with the <li> tag in the dropdown class. The item text provides plain text or link text. The plain text shows as a normal dropdown content, and the link text shows underlined text.

Syntax

The following syntax shows default dropdown with link on the web page.

Examples

The following example shows basic dropdown with link using bootstrap 5 classes. We use <a> tag to click on the dropdown menu. After clicking on the button dropdown displays item list.

Output

The following image shows the basic dropdown function with the text.

Bootstrap 5 Dropdowns

Conclusion

The dropdown function uses bootstrap 5 web applications to display multiple links in a small space. This function shows many pages and informative content on clicking one button or anchor tag.


Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA