Bootstrap 5 Dropdowns Dropright
Last Updated :
20 Feb, 2023
Bootstrap 5 Dropdowns Dropright is used to open the dropdown on the right-hand side of the user, We can one the dropdowns anywhere
Bootstrap 5 Dropdowns Dropright Class:
- dropend: This class is used to launch dropdown menus to the right of the button.
Syntax
<div class="btn-group dropend">
<button type="button"
class="btn dropdown-toggle"
data-bs-toggle="dropdown">
...
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Below examples illustrate the Bootstrap 5 Dropdowns Dropright:
Example 1: In this example, we will create a dropdown menu and trigger it to right.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Dropdowns Dropright</ h2 >
< div class = "btn-group dropend" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown" >
Click Me!!
</ button >
< ul class = "dropdown-menu" >
< li >
< h6 class="dropdown-header
text-success">
Non Living Things
</ h6 >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Pencil
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Erazer
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Sharpener
</ a >
</ li >
< li >
< h6 class="dropdown-header
text-danger">
Living Things
</ h6 >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Human Beings
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Plants
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Animals
</ a >
</ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will create a dropright dropdown menu using a split button.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Dropdowns Dropright</ h2 >
< div class = "btn-group dropend" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown" >
Click Me!!
</ button >
< ul class = "dropdown-menu" >
< li >
< h6 class="dropdown-header
text-success">
Non Living Things
</ h6 >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Pencil
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Erazer
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Sharpener
</ a >
</ li >
< li >
< h6 class="dropdown-header
text-danger">
Living Things
</ h6 >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Human Beings
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Plants
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Animals
</ a >
</ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropright
Share your thoughts in the comments
Please Login to comment...