Skip to content

Commit 7d23081

Browse files
Johann-SJohann-S
committed
Add dropright (right placement for our dropdown)
1 parent b822b5a commit 7d23081

File tree

4 files changed

+110
-2
lines changed

4 files changed

+110
-2
lines changed

‎docs/4.0/components/dropdowns.md

+61
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,67 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
410410
</div>
411411
{% endhighlight %}
412412

413+
## Dropright variation
414+
415+
Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
416+
417+
<div class="bd-example">
418+
<div class="btn-group dropright">
419+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
420+
Dropright
421+
</button>
422+
<div class="dropdown-menu">
423+
<a class="dropdown-item" href="#">Action</a>
424+
<a class="dropdown-item" href="#">Another action</a>
425+
<a class="dropdown-item" href="#">Something else here</a>
426+
<div class="dropdown-divider"></div>
427+
<a class="dropdown-item" href="#">Separated link</a>
428+
</div>
429+
</div>
430+
431+
<div class="btn-group dropright">
432+
<button type="button" class="btn btn-secondary">
433+
Split dropright
434+
</button>
435+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
436+
<span class="sr-only">Toggle Dropdright</span>
437+
</button>
438+
<div class="dropdown-menu">
439+
<a class="dropdown-item" href="#">Action</a>
440+
<a class="dropdown-item" href="#">Another action</a>
441+
<a class="dropdown-item" href="#">Something else here</a>
442+
<div class="dropdown-divider"></div>
443+
<a class="dropdown-item" href="#">Separated link</a>
444+
</div>
445+
</div>
446+
</div>
447+
448+
{% highlight html %}
449+
<!-- Default dropright button -->
450+
<div class="btn-group dropright">
451+
<button type="button" class="btn btn-secondary">Dropright</button>
452+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
453+
<span class="sr-only">Toggle Dropdright</span>
454+
</button>
455+
<div class="dropdown-menu">
456+
<!-- Dropdown menu links -->
457+
</div>
458+
</div>
459+
460+
<!-- Split dropright button -->
461+
<div class="btn-group dropright">
462+
<button type="button" class="btn btn-secondary">
463+
Split dropright
464+
</button>
465+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
466+
<span class="sr-only">Toggle Dropdright</span>
467+
</button>
468+
<div class="dropdown-menu">
469+
<!-- Dropdown menu links -->
470+
</div>
471+
</div>
472+
{% endhighlight %}
473+
413474
## Menu items
414475

415476
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

‎js/src/dropdown.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Dropdown = (() => {
5555
DISABLED : 'disabled',
5656
SHOW : 'show',
5757
DROPUP : 'dropup',
58+
DROPRIGHT : 'dropright',
5859
MENURIGHT : 'dropdown-menu-right',
5960
MENULEFT : 'dropdown-menu-left'
6061
}
@@ -71,7 +72,9 @@ const Dropdown = (() => {
7172
TOP : 'top-start',
7273
TOPEND : 'top-end',
7374
BOTTOM : 'bottom-start',
74-
BOTTOMEND : 'bottom-end'
75+
BOTTOMEND : 'bottom-end',
76+
RIGHT : 'right-start',
77+
RIGHTEND : 'right-end'
7578
}
7679

7780
const Default = {
@@ -227,14 +230,16 @@ const Dropdown = (() => {
227230

228231
_getPlacement() {
229232
const $parentDropdown = $(this._element).parent()
230-
let placement = AttachmentMap.BOTTOM
233+
let placement = AttachmentMap.BOTTOM
231234

232235
// Handle dropup
233236
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
234237
placement = AttachmentMap.TOP
235238
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
236239
placement = AttachmentMap.TOPEND
237240
}
241+
} else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
242+
placement = AttachmentMap.RIGHT
238243
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
239244
placement = AttachmentMap.BOTTOMEND
240245
}

‎js/tests/visual/dropdown.html

+26
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
9393
</div>
9494
</div>
9595
</div>
96+
9697
<div class="col-sm-12 mt-4">
9798
<div class="btn-group dropup" role="group">
9899
<a href="#" class="btn btn-secondary">Dropup split align right</a>
@@ -114,8 +115,33 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
114115
</div>
115116
</div>
116117
</div>
118+
119+
<div class="col-sm-12 mt-4">
120+
<div class="btn-group dropright" role="group">
121+
<a href="#" class="btn btn-secondary">Dropright split</a>
122+
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
123+
<span class="sr-only">Product actions</span>
124+
</button>
125+
<div class="dropdown-menu">
126+
<button class="dropdown-item" type="button">Action</button>
127+
<button class="dropdown-item" type="button">Another action</button>
128+
<button class="dropdown-item" type="button">Something else here with a long text</button>
129+
</div>
130+
</div>
131+
<div class="btn-group dropright">
132+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
133+
Dropright
134+
</button>
135+
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
136+
<button class="dropdown-item" type="button">Action</button>
137+
<button class="dropdown-item" type="button">Another action</button>
138+
<button class="dropdown-item" type="button">Something else here</button>
139+
</div>
140+
</div>
117141
</div>
142+
118143
</div>
144+
</div>
119145

120146
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
121147
<script src="../../../assets/js/vendor/popper.min.js"></script>

‎scss/_dropdown.scss

+16
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,22 @@
3939
}
4040
}
4141

42+
.dropright {
43+
.dropdown-menu {
44+
margin-top: -1px;
45+
margin-left: 2px;
46+
}
47+
48+
.dropdown-toggle {
49+
&::after {
50+
vertical-align: 0;
51+
border-top: $caret-width solid transparent;
52+
border-bottom: $caret-width solid transparent;
53+
border-left: $caret-width solid;
54+
}
55+
}
56+
}
57+
4258
// The dropdown menu
4359
.dropdown-menu {
4460
position: absolute;

0 commit comments

Comments
 (0)