diff options
| -rw-r--r-- | docs/components/dropdowns.md | 19 | ||||
| -rw-r--r-- | scss/_dropdown.scss | 6 |
2 files changed, 25 insertions, 0 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index c60cb6fdb..8b1ae7a67 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -28,6 +28,25 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another </div> {% endexample %} +### Button elements + +You can optionaly use `<button>` elements in your dropdowns instead of `<a>`s. + +{% example html %} +<div class="dropdown open"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dropdown + </button> + <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> + <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> +{% endexample %} + + + ## Alignment By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 734efbb0b..4ee6674e5 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -65,6 +65,12 @@ color: $dropdown-link-color; white-space: nowrap; // prevent links from randomly breaking onto new lines + // For `<button>`s + text-align: inherit; + width: 100%; + background: none; + border: 0; + @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; |