NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Components

A dynamic navigation based on scroll position to indicate which link is currently active in the viewport.

Example

@AXA specific class nav-scrollspy to design correctly the nav/navbar within flex-column

Item 1

Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Item 4

Placeholder content for the scrollspy example. This one relates to item 4. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.
Placeholder content for the scrollspy example. This one relates to item 4. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice. 

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="navbar navbar-light bg-light">
      <div class="pb-4 h2 w-100">Navbar</div>
      <nav class="nav nav-pills flex-column nav-scrollspy">
        <a class="nav-link active" href="#item-1">Item 1</a>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <a class="nav-link" href="#item-4">Item 4</a>
      </nav>
    </nav>
  </div>
  <div class="col-8">
    <div
      data-bs-spy="scroll"
      data-bs-target="#navbar-example3"
      data-bs-offset="0"
      style="overflow: auto; position: relative; height: 350px"
    >
      <h2 id="item-1">Item 1</h2>
      <p>...</p>
      <h2 id="item-2">Item 2</h2>
      <p>...</p>
      <h2 id="item-3">Item 3</h2>
      <p>...</p>
      <h2 id="item-4">Item 4</h2>
      <p>...</p>
    </div>
  </div>
</div>