diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/navbar.md (renamed from site/content/docs/5.2/components/navbar.md) | 90 |
1 files changed, 47 insertions, 43 deletions
diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.3/components/navbar.md index 7cbc4e2..9b9f86a 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -19,7 +19,7 @@ Here's what you need to know before getting started with the navbar: - **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles. {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} ## Supported content @@ -37,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> @@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. +This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. ### Brand @@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class. {{< example >}} <!-- As a link --> -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <!-- As a heading --> -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">Navbar</span> </div> @@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class. You can replace the text within the `.navbar-brand` with an `<img>`. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24"> @@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`. You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"> @@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page. Please note that you should also add the `aria-current` attribute on the active `.nav-link`. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> @@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active And because we use classes for our navs, you can avoid the list-based approach entirely if you like. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> @@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> @@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele Place various form controls and components within a navbar: {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> @@ -240,7 +240,7 @@ Place various form controls and components within a navbar: Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex" role="search"> @@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <form class="container-fluid"> <div class="input-group"> <span class="input-group-text" id="basic-addon1">@</span> @@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <form class="container-fluid justify-content-start"> <button class="btn btn-outline-success me-2" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> @@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-text"> Navbar text with an inline element @@ -292,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj Mix and match with other components and utilities as needed. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> @@ -321,13 +321,17 @@ Mix and match with other components and utilities as needed. ## Color schemes {{< callout warning >}} -**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`. +**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}}) + +--- + +**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`. {{< /callout >}} -Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities. +Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities. <div class="bd-example"> - <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> + <nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> @@ -356,7 +360,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and </div> </nav> - <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> + <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> @@ -385,7 +389,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and </div> </nav> - <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;"> + <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> @@ -416,11 +420,11 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and </div> ```html -<nav class="navbar navbar-dark bg-dark"> +<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark"> <!-- Navbar content --> </nav> -<nav class="navbar navbar-dark bg-primary"> +<nav class="navbar bg-primary" data-bs-theme="dark"> <!-- Navbar content --> </nav> @@ -435,7 +439,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it {{< example >}} <div class="container"> - <nav class="navbar navbar-expand-lg bg-light"> + <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -446,7 +450,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it Use any of the responsive containers to change how wide the content in your navbar is presented. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-md"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -460,7 +464,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Default</a> </div> @@ -468,7 +472,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar fixed-top bg-light"> +<nav class="navbar fixed-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed top</a> </div> @@ -476,7 +480,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar fixed-bottom bg-light"> +<nav class="navbar fixed-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed bottom</a> </div> @@ -484,7 +488,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar sticky-top bg-light"> +<nav class="navbar sticky-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky top</a> </div> @@ -492,7 +496,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar sticky-bottom bg-light"> +<nav class="navbar sticky-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky bottom</a> </div> @@ -508,7 +512,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar scroll</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> @@ -559,7 +563,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el With no `.navbar-brand` shown at the smallest breakpoint: {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -589,7 +593,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: With a brand name shown on the left and toggler on the right: {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> @@ -619,7 +623,7 @@ With a brand name shown on the left and toggler on the right: With a toggler on the left and brand name on the right: {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -651,10 +655,10 @@ With a toggler on the left and brand name on the right: Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done! {{< example >}} -<div class="collapse" id="navbarToggleExternalContent"> +<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark"> <div class="bg-dark p-4"> - <h5 class="text-white h4">Collapsed content</h5> - <span class="text-muted">Toggleable via the navbar brand.</span> + <h5 class="text-body-emphasis h4">Collapsed content</h5> + <span class="text-body-secondary">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> @@ -675,10 +679,10 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely. {{< example >}} -<nav class="navbar bg-light fixed-top"> +<nav class="navbar bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> @@ -721,9 +725,9 @@ In the example below, to create an offcanvas navbar that is always collapsed acr To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`. ```html -<nav class="navbar navbar-expand-lg bg-light fixed-top"> +<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> <a class="navbar-brand" href="#">Offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"> @@ -738,7 +742,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark <nav class="navbar navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas dark navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> @@ -806,7 +810,7 @@ Variables for the [dark navbar](#color-schemes): {{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. |