Skip to content

Commit e454c8e

Browse files
Johann-Smdo
Johann-S
authored and
mdo
committed
Add dropright and dropleft (right and left placements for our dropdown) (#23860)
* Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left
1 parent b1623c4 commit e454c8e

File tree

5 files changed

+244
-2
lines changed

5 files changed

+244
-2
lines changed

‎docs/4.0/components/dropdowns.md

+126
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,132 @@ 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 Dropright</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 Dropright</span>
467+
</button>
468+
<div class="dropdown-menu">
469+
<!-- Dropdown menu links -->
470+
</div>
471+
</div>
472+
{% endhighlight %}
473+
474+
## Dropleft variation
475+
476+
Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
477+
478+
<div class="bd-example">
479+
<div class="btn-group dropleft">
480+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
481+
Dropleft
482+
</button>
483+
<div class="dropdown-menu">
484+
<a class="dropdown-item" href="#">Action</a>
485+
<a class="dropdown-item" href="#">Another action</a>
486+
<a class="dropdown-item" href="#">Something else here</a>
487+
<div class="dropdown-divider"></div>
488+
<a class="dropdown-item" href="#">Separated link</a>
489+
</div>
490+
</div>
491+
492+
<div class="btn-group">
493+
<div class="btn-group dropleft" role="group">
494+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
495+
<span class="sr-only">Toggle Dropleft</span>
496+
</button>
497+
<div class="dropdown-menu">
498+
<a class="dropdown-item" href="#">Action</a>
499+
<a class="dropdown-item" href="#">Another action</a>
500+
<a class="dropdown-item" href="#">Something else here</a>
501+
<div class="dropdown-divider"></div>
502+
<a class="dropdown-item" href="#">Separated link</a>
503+
</div>
504+
</div>
505+
<button type="button" class="btn btn-secondary">
506+
Split dropleft
507+
</button>
508+
</div>
509+
</div>
510+
511+
{% highlight html %}
512+
<!-- Default dropleft button -->
513+
<div class="btn-group dropleft">
514+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
515+
Dropleft
516+
</button>
517+
<div class="dropdown-menu">
518+
<!-- Dropdown menu links -->
519+
</div>
520+
</div>
521+
522+
<!-- Split dropleft button -->
523+
<div class="btn-group">
524+
<div class="btn-group dropleft" role="group">
525+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
526+
<span class="sr-only">Toggle Dropleft</span>
527+
</button>
528+
<div class="dropdown-menu">
529+
<!-- Dropdown menu links -->
530+
</div>
531+
</div>
532+
<button type="button" class="btn btn-secondary">
533+
Split dropleft
534+
</button>
535+
</div>
536+
{% endhighlight %}
537+
538+
413539
## Menu items
414540

415541
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

+12-2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ const Dropdown = (($) => {
5555
DISABLED : 'disabled',
5656
SHOW : 'show',
5757
DROPUP : 'dropup',
58+
DROPRIGHT : 'dropright',
59+
DROPLEFT : 'dropleft',
5860
MENURIGHT : 'dropdown-menu-right',
5961
MENULEFT : 'dropdown-menu-left'
6062
}
@@ -71,7 +73,11 @@ const Dropdown = (($) => {
7173
TOP : 'top-start',
7274
TOPEND : 'top-end',
7375
BOTTOM : 'bottom-start',
74-
BOTTOMEND : 'bottom-end'
76+
BOTTOMEND : 'bottom-end',
77+
RIGHT : 'right-start',
78+
RIGHTEND : 'right-end',
79+
LEFT : 'left-start',
80+
LEFTEND : 'left-end'
7581
}
7682

7783
const Default = {
@@ -227,14 +233,18 @@ const Dropdown = (($) => {
227233

228234
_getPlacement() {
229235
const $parentDropdown = $(this._element).parent()
230-
let placement = AttachmentMap.BOTTOM
236+
let placement = AttachmentMap.BOTTOM
231237

232238
// Handle dropup
233239
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
234240
placement = AttachmentMap.TOP
235241
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
236242
placement = AttachmentMap.TOPEND
237243
}
244+
} else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
245+
placement = AttachmentMap.RIGHT
246+
} else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
247+
placement = AttachmentMap.LEFT
238248
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
239249
placement = AttachmentMap.BOTTOMEND
240250
}

‎js/tests/visual/dropdown.html

+48
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,55 @@ <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>
141+
<!-- dropleft -->
142+
<div class="btn-group dropleft" role="group">
143+
<a href="#" class="btn btn-secondary">Dropleft split</a>
144+
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
145+
<span class="sr-only">Product actions</span>
146+
</button>
147+
<div class="dropdown-menu">
148+
<button class="dropdown-item" type="button">Action</button>
149+
<button class="dropdown-item" type="button">Another action</button>
150+
<button class="dropdown-item" type="button">Something else here with a long text</button>
151+
</div>
152+
</div>
153+
<div class="btn-group dropleft">
154+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
155+
Dropleft
156+
</button>
157+
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
158+
<button class="dropdown-item" type="button">Action</button>
159+
<button class="dropdown-item" type="button">Another action</button>
160+
<button class="dropdown-item" type="button">Something else here</button>
161+
</div>
162+
</div>
117163
</div>
164+
118165
</div>
166+
</div>
119167

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

‎scss/_dropdown.scss

+28
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,34 @@
4444
}
4545
}
4646

47+
.dropright {
48+
.dropdown-menu {
49+
margin-top: 0;
50+
margin-left: $dropdown-spacer;
51+
}
52+
53+
.dropdown-toggle {
54+
@include caret(right);
55+
&::after {
56+
vertical-align: 0;
57+
}
58+
}
59+
}
60+
61+
.dropleft {
62+
.dropdown-menu {
63+
margin-top: 0;
64+
margin-right: $dropdown-spacer;
65+
}
66+
67+
.dropdown-toggle {
68+
@include caret(left);
69+
&::before {
70+
vertical-align: 0;
71+
}
72+
}
73+
}
74+
4775
// Dividers (basically an `<hr>`) within the dropdown
4876
.dropdown-divider {
4977
@include nav-divider($dropdown-divider-bg);

‎scss/mixins/_caret.scss

+30
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@
1212
border-left: $caret-width solid transparent;
1313
}
1414

15+
@mixin caret-right {
16+
border-top: $caret-width solid transparent;
17+
border-bottom: $caret-width solid transparent;
18+
border-left: $caret-width solid;
19+
}
20+
21+
@mixin caret-left {
22+
border-top: $caret-width solid transparent;
23+
border-right: $caret-width solid;
24+
border-bottom: $caret-width solid transparent;
25+
}
26+
1527
@mixin caret($direction: down) {
1628
@if $enable-caret {
1729
&::after {
@@ -25,6 +37,24 @@
2537
@include caret-down;
2638
} @else if $direction == up {
2739
@include caret-up;
40+
} @else if $direction == right {
41+
@include caret-right;
42+
}
43+
}
44+
45+
@if $direction == left {
46+
&::after {
47+
display: none;
48+
}
49+
50+
&::before {
51+
display: inline-block;
52+
width: 0;
53+
height: 0;
54+
margin-right: $caret-width * .85;
55+
vertical-align: $caret-width * .85;
56+
content: "";
57+
@include caret-left;
2858
}
2959
}
3060

0 commit comments

Comments
 (0)