diff --git a/.cspell.json b/.cspell.json index 3995ec1222..f142e4a834 100644 --- a/.cspell.json +++ b/.cspell.json @@ -61,6 +61,7 @@ "markdownify", "mediaqueries", "minifiers", + "misfunction", "monospace", "mouseleave", "navbars", diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index d48154a86b..52b67543a8 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -242,17 +242,8 @@ } .simple-list-example-scrollspy { - a { - padding: .25rem; - margin: .5rem 0; - - &:focus { - background-color: rgba($bd-purple, .65); - } - } - .active { - background-color: rgba($bd-purple, .15); + background-color: rgba(var(--bd-violet-rgb), .15); } } diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index 21b6a5e2f4..30cf79b3e7 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -8,20 +8,26 @@ toc: true ## How it works -Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Generally, it will be most useful in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. +Scrollspy toggles the `.active` class on anchor (``) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page. Here's how it works. -{{< callout >}} -### Scrollable containers and keyboard access +- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `` or a custom element with a set `height` and `overflow-y: scroll`. -If you're making a scrollable container (other than the ``), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access. -{{< /callout >}} +- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access. -## Example in navbar +- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `home` must correspond to something in the DOM like `
` -Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. +- Target elements that aren't visible will be ignored and their corresponding nav items will never receive an `.active` class. + +Checkout the examples below to see it in action. + +## Examples + +### Navbar + +Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
- -
+

First heading

...

Second heading

@@ -90,15 +96,14 @@ Scroll the area below the navbar and watch the active class change. The dropdown
``` -## Example with nested nav +### Nested nav Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
-
-
+

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 1-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 1-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

Item 3-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.

@@ -167,7 +179,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p -
+

Item 1

...

@@ -199,7 +211,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
``` -## Example with list-group +### List group Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change. @@ -214,7 +226,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
-
+

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

@@ -235,7 +247,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group Item 3 Item 4
-
+

Item 1

...

Item 2

@@ -247,19 +259,19 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
``` -## Example with simple anchors +### Simple anchors -Scrollspy is not limited to nav components and list groups, but will work on any `` anchor elements in the current document. Scroll the area and watch the `.active` class change. +Scrollspy is not limited to nav components and list groups, so it will work on any `` anchor elements in the current document. Scroll the area and watch the `.active` class change.
-
- Item 1 - Item 2 - Item 3 - Item 4 - Item 5 +
+ Item 1 + Item 2 + Item 3 + Item 4 + Item 5
@@ -324,18 +336,6 @@ const scrollSpy = new bootstrap.ScrollSpy(document.body, { }) ``` -{{< callout danger >}} -#### Requires resolvable `id` targets - -Links must have resolvable `id` targets, otherwise they are being ignored. For example, a `home` must correspond to something in the DOM like `
` -{{< /callout >}} - -{{< callout info >}} -#### Non-visible target elements are ignored - -Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted. -{{< /callout >}} - ### Options {{< markdown >}}