diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/dropdowns.md | 126 |
1 files changed, 126 insertions, 0 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. |