Skip to content

Commit

Permalink
Back to navbar and nested nav examples with only enlargment of nested…
Browse files Browse the repository at this point in the history 
… nav

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
  • Loading branch information
@isabellechanclou
isabellechanclou committed Dec 9, 2021
1 parent 35e6dfd commit 6452ff1
Showing 1 changed file with 58 additions and 45 deletions.
103 changes: 58 additions & 45 deletions site/content/docs/5.1/components/scrollspy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,18 @@ When successfully implemented, your nav or list group will update accordingly, m
If you're making a scrollable container (other than the `<body>`), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access.
{{< /callout >}}

## Example in nav
## Example in navbar

Scroll the area below the nav and watch the active class change. The dropdown items will be highlighted as well.
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.

<div class="bd-example">
<nav id="nav-example1" class="nav">
<nav id="navbar-example2" class="navbar px-3">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#scrollspyHeading1">First</a>
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
Expand All @@ -46,7 +49,7 @@ Scroll the area below the nav and watch the active class change. The dropdown it
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#nav-example1" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>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.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
Expand All @@ -61,10 +64,13 @@ Scroll the area below the nav and watch the active class change. The dropdown it
</div>

```html
<nav id="nav-example1" class="nav">
<nav id="navbar-example2" class="navbar px-3">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#scrollspyHeading1">First</a>
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
Expand All @@ -80,8 +86,7 @@ Scroll the area below the nav and watch the active class change. The dropdown it
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#nav-example1" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
Expand All @@ -101,10 +106,13 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p

<div class="bd-example">
<div class="row">
<div class="col-4">
<nav id="nav-example2" class="nav flex-column">
<div class="col-4 col-lg-3">
<nav id="navbar-example3" class="navbar navbar-light flex-column align-items-stretch">
<a class="navbar-brand align-self-start" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1" aria-current="page">Item 1</a>
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
Expand All @@ -118,8 +126,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#nav-example2" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<div class="col-8 col-lg-9">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>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.</p>
<h5 id="item-1-1">Item 1-1</h5>
Expand All @@ -140,42 +148,47 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div>

```html
<div class="col-4">
<nav id="nav-example2" class="nav flex-column">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1" aria-current="page">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<div class="row">
<div class="col-4 col-lg-3">
<nav id="navbar-example3" class="navbar navbar-light flex-column align-items-stretch p-3">
<a class="navbar-brand align-self-start" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</nav>
</div>

<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#nav-example2" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
<div class="col-8 col-lg-9">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>

```

## Example with list-group
Expand Down

0 comments on commit 6452ff1

Please sign in to comment.