diff --git a/docs/components/navbar.md b/docs/components/navbar.md index e730404be5..b1405b5ba3 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -352,6 +352,84 @@ Navbars can be statically placed (their default behavior), static without rounde {% endexample %} +## Responsive behaviors + +Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. + +### Toggler + +Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.navbar-toggler-right` modifiers. These are absolutely positioned within the navbar to avoid interference with the collapsed state. You can also use your own styles to position togglers. Below are examples of different toggle styles. + +With no `.navbar-brand` shown in lowest breakpoint: + +{% example html %} + +{% endexample %} + +With a brand name shown on the left and toggler on the right: + +{% example html %} + +{% endexample %} + +### External content + +Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done! + +{% example html %} +