aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/4.0/components/dropdowns.md126
-rw-r--r--js/src/dropdown.js14
-rw-r--r--js/tests/visual/dropdown.html48
-rw-r--r--scss/_dropdown.scss28
-rw-r--r--scss/mixins/_caret.scss30
5 files changed, 244 insertions, 2 deletions
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
index c4ada2b0f..cb307550d 100644
--- a/docs/4.0/components/dropdowns.md
+++ b/docs/4.0/components/dropdowns.md
@@ -410,6 +410,132 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
</div>
{% endhighlight %}
+## Dropright variation
+
+Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
+
+<div class="bd-example">
+ <div class="btn-group dropright">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropright
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <div class="btn-group dropright">
+ <button type="button" class="btn btn-secondary">
+ Split dropright
+ </button>
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdright</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+</div>
+
+{% highlight html %}
+<!-- Default dropright button -->
+<div class="btn-group dropright">
+ <button type="button" class="btn btn-secondary">Dropright</button>
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropright</span>
+ </button>
+ <div class="dropdown-menu">
+ <!-- Dropdown menu links -->
+ </div>
+</div>
+
+<!-- Split dropright button -->
+<div class="btn-group dropright">
+ <button type="button" class="btn btn-secondary">
+ Split dropright
+ </button>
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropright</span>
+ </button>
+ <div class="dropdown-menu">
+ <!-- Dropdown menu links -->
+ </div>
+</div>
+{% endhighlight %}
+
+## Dropleft variation
+
+Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
+
+<div class="bd-example">
+ <div class="btn-group dropleft">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropleft
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+
+ <div class="btn-group">
+ <div class="btn-group dropleft" role="group">
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropleft</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </div>
+ <button type="button" class="btn btn-secondary">
+ Split dropleft
+ </button>
+ </div>
+</div>
+
+{% highlight html %}
+<!-- Default dropleft button -->
+<div class="btn-group dropleft">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropleft
+ </button>
+ <div class="dropdown-menu">
+ <!-- Dropdown menu links -->
+ </div>
+</div>
+
+<!-- Split dropleft button -->
+<div class="btn-group">
+ <div class="btn-group dropleft" role="group">
+ <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropleft</span>
+ </button>
+ <div class="dropdown-menu">
+ <!-- Dropdown menu links -->
+ </div>
+ </div>
+ <button type="button" class="btn btn-secondary">
+ Split dropleft
+ </button>
+</div>
+{% endhighlight %}
+
+
## Menu items
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.
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 18b051b89..45d061c93 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -55,6 +55,8 @@ const Dropdown = (($) => {
DISABLED : 'disabled',
SHOW : 'show',
DROPUP : 'dropup',
+ DROPRIGHT : 'dropright',
+ DROPLEFT : 'dropleft',
MENURIGHT : 'dropdown-menu-right',
MENULEFT : 'dropdown-menu-left'
}
@@ -71,7 +73,11 @@ const Dropdown = (($) => {
TOP : 'top-start',
TOPEND : 'top-end',
BOTTOM : 'bottom-start',
- BOTTOMEND : 'bottom-end'
+ BOTTOMEND : 'bottom-end',
+ RIGHT : 'right-start',
+ RIGHTEND : 'right-end',
+ LEFT : 'left-start',
+ LEFTEND : 'left-end'
}
const Default = {
@@ -227,7 +233,7 @@ const Dropdown = (($) => {
_getPlacement() {
const $parentDropdown = $(this._element).parent()
- let placement = AttachmentMap.BOTTOM
+ let placement = AttachmentMap.BOTTOM
// Handle dropup
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
@@ -235,6 +241,10 @@ const Dropdown = (($) => {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND
}
+ } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
+ placement = AttachmentMap.RIGHT
+ } else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
+ placement = AttachmentMap.LEFT
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 11b89b0f2..b2e588677 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -93,6 +93,7 @@
</div>
</div>
</div>
+
<div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a>
@@ -114,8 +115,55 @@
</div>
</div>
</div>
+
+ <div class="col-sm-12 mt-4">
+ <div class="btn-group dropright" role="group">
+ <a href="#" class="btn btn-secondary">Dropright split</a>
+ <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">
+ <span class="sr-only">Product actions</span>
+ </button>
+ <div class="dropdown-menu">
+ <button class="dropdown-item" type="button">Action</button>
+ <button class="dropdown-item" type="button">Another action</button>
+ <button class="dropdown-item" type="button">Something else here with a long text</button>
+ </div>
+ </div>
+ <div class="btn-group dropright">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropright
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
+ <button class="dropdown-item" type="button">Action</button>
+ <button class="dropdown-item" type="button">Another action</button>
+ <button class="dropdown-item" type="button">Something else here</button>
+ </div>
+ </div>
+ <!-- dropleft -->
+ <div class="btn-group dropleft" role="group">
+ <a href="#" class="btn btn-secondary">Dropleft split</a>
+ <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">
+ <span class="sr-only">Product actions</span>
+ </button>
+ <div class="dropdown-menu">
+ <button class="dropdown-item" type="button">Action</button>
+ <button class="dropdown-item" type="button">Another action</button>
+ <button class="dropdown-item" type="button">Something else here with a long text</button>
+ </div>
+ </div>
+ <div class="btn-group dropleft">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropleft
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropleftMenu">
+ <button class="dropdown-item" type="button">Action</button>
+ <button class="dropdown-item" type="button">Another action</button>
+ <button class="dropdown-item" type="button">Something else here</button>
+ </div>
+ </div>
</div>
+
</div>
+ </div>
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../assets/js/vendor/popper.min.js"></script>
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 271764188..19edfca7a 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -44,6 +44,34 @@
}
}
+.dropright {
+ .dropdown-menu {
+ margin-top: 0;
+ margin-left: $dropdown-spacer;
+ }
+
+ .dropdown-toggle {
+ @include caret(right);
+ &::after {
+ vertical-align: 0;
+ }
+ }
+}
+
+.dropleft {
+ .dropdown-menu {
+ margin-top: 0;
+ margin-right: $dropdown-spacer;
+ }
+
+ .dropdown-toggle {
+ @include caret(left);
+ &::before {
+ vertical-align: 0;
+ }
+ }
+}
+
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index daab9d03c..40478e492 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -12,6 +12,18 @@
border-left: $caret-width solid transparent;
}
+@mixin caret-right {
+ border-top: $caret-width solid transparent;
+ border-bottom: $caret-width solid transparent;
+ border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+ border-top: $caret-width solid transparent;
+ border-right: $caret-width solid;
+ border-bottom: $caret-width solid transparent;
+}
+
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
@@ -25,6 +37,24 @@
@include caret-down;
} @else if $direction == up {
@include caret-up;
+ } @else if $direction == right {
+ @include caret-right;
+ }
+ }
+
+ @if $direction == left {
+ &::after {
+ display: none;
+ }
+
+ &::before {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-right: $caret-width * .85;
+ vertical-align: $caret-width * .85;
+ content: "";
+ @include caret-left;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 06:43:34 +0000