Cartzilla component

Scrollspy

Automatically update navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Navbar

First heading

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.

Second heading

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.

Third heading

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.

Fourth heading

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.

Fifth heading

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.

'use client'

import ScrollSpy from '@/components/scrollspy'
import Navbar from 'react-bootstrap/Navbar'
import NavbarBrand from 'react-bootstrap/NavbarBrand'
import NavbarToggle from 'react-bootstrap/NavbarToggle'
import NavbarCollapse from 'react-bootstrap/NavbarCollapse'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'
import Dropdown from 'react-bootstrap/Dropdown'
import DropdownToggle from 'react-bootstrap/DropdownToggle'
import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import DropdownDivider from 'react-bootstrap/DropdownDivider'

export default function ScrollspyNavbarDemo() {
  return (
    <>

      {/* Navbar with navigation wrapped in ScrollSpy  */}
      <Navbar as="nav" expand="md" className="bg-body-tertiary rounded px-3 pe-md-2 mb-4">
        <NavbarBrand href="#">Cartzilla</NavbarBrand>
        <NavbarToggle>
          <span className="navbar-toggler-icon"></span>
        </NavbarToggle>
        <NavbarCollapse id="scrollspy-navbar-nav">
          <ScrollSpy activeClass="active" rootMargin="-60px 0px 0px 0px">
            <Nav as="ul" className="ms-auto">
              <NavItem as="li">
                <NavLink href="#scrollspySection1" active={false} className="fs-sm">
                  First
                </NavLink>
              </NavItem>
              <NavItem as="li">
                <NavLink href="#scrollspySection2" active={false} className="fs-sm">
                  Second
                </NavLink>
              </NavItem>
              <Dropdown as="li" className="nav-item">
                <DropdownToggle as={NavLink} active={false} className="fs-sm">
                  Dropdown
                </DropdownToggle>
                <DropdownMenu as="ul" renderOnMount={true}>
                  <NavItem as="li">
                    <DropdownItem href="#scrollspySection3" active={false}>
                      Third
                    </DropdownItem>
                  </NavItem>
                  <NavItem as="li">
                    <DropdownItem href="#scrollspySection4" active={false}>
                      Fourth
                    </DropdownItem>
                  </NavItem>
                  <DropdownDivider />
                  <NavItem as="li">
                    <DropdownItem href="#scrollspySection5" active={false}>
                      Fifth
                    </DropdownItem>
                  </NavItem>
                </DropdownMenu>
              </Dropdown>
            </Nav>
          </ScrollSpy>
        </NavbarCollapse>
      </Navbar>

      {/* The content with anchors */}
      <div className="overflow-auto px-3" style={{ maxHeight: 130 }}>
        <div id="scrollspySection1" className="pb-3">
          <h5>First heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspySection2" className="pb-3">
          <h5>Second heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspySection3" className="pb-3">
          <h5>Third heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspySection4" className="pb-3">
          <h5>Fourth heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspySection5">
          <h5>Fifth heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
      </div>
    </>
  )
}

List group with nested nav

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.

'use client'

import ScrollSpy from '@/components/scrollspy'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import ListGroup from 'react-bootstrap/ListGroup'
import ListGroupItem from 'react-bootstrap/ListGroupItem'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function ScrollspyNestedNavDemo() {
  return (
    <Row>

      {/* List Group wrapped in ScrollSpy  */}
      <Col md={3}>
        <ScrollSpy activeClass="active">
          <ListGroup as="nav" variant="borderless" className="mb-4">
            <ListGroupItem action href="#item-1" active={false}>
              Item 1
            </ListGroupItem>
            <Nav
              as="ul"
              variant="underline"
              className="flex-column border-start ms-2 my-2"
              style={{ gap: '0.25rem' }}
            >
              <NavItem as="li">
                <NavLink href="#item-1-1" active={false} className="fw-normal">
                  Item 1-1
                </NavLink>
              </NavItem>
              <NavItem as="li">
                <NavLink href="#item-1-2" active={false} className="fw-normal">
                  Item 1-2
                </NavLink>
              </NavItem>
            </Nav>
            <ListGroupItem action href="#item-2" active={false}>
              Item 2
            </ListGroupItem>
            <ListGroupItem action href="#item-3" active={false}>
              Item 3
            </ListGroupItem>
            <Nav
              as="ul"
              variant="underline"
              className="flex-column border-start ms-2 my-2"
              style={{ gap: '0.25rem' }}
            >
              <NavItem as="li">
                <NavLink href="#item-3-1" active={false} className="fw-normal">
                  Item 3-1
                </NavLink>
              </NavItem>
              <NavItem as="li">
                <NavLink href="#item-3-2" active={false} className="fw-normal">
                  Item 3-2
                </NavLink>
              </NavItem>
            </Nav>
          </ListGroup>
        </ScrollSpy>
      </Col>

      {/* The content with anchors */}
      <Col md={9} className="pt-4 pt-md-0">
        <div className="overflow-auto pe-2 px-md-3" style={{ maxHeight: 360 }}>
          <div id="item-1" className="pb-3">
            <h4>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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-1-1" className="pb-3">
            <h5>Item 1-1</h5>
            <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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-1-2" className="pb-3">
            <h5>Item 1-2</h5>
            <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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-2" className="pb-3">
            <h4>Item 2</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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-3" className="pb-3">
            <h4>Item 3</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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-3-1" className="pb-3">
            <h5>Item 3-1</h5>
            <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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
          <div id="item-3-2">
            <h5>Item 3-2</h5>
            <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&apos;s repeated throughout the component example. We keep
              adding some more example copy here to emphasize the scrolling and highlighting.
            </p>
            <p>
              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.
            </p>
          </div>
        </div>
      </Col>
    </Row>
  )
}

Tabs

First
Second
Third
First heading

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.

Second heading

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.

Third heading

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.

'use client'

import ScrollSpy from '@/components/scrollspy'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function ScrollspyNavbarDemo() {
  return (
    <>

      {/* Nav tabs wrapped in ScrollSpy  */}
      <ScrollSpy activeClass="active">
        <Nav variant="tabs" className="mb-4" style={{ maxWidth: 350 }}>
          <NavItem>
            <NavLink href="#scrollspyTabsSection1" active={false}>
              First
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#scrollspyTabsSection2" active={false}>
              Second
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#scrollspyTabsSection3" active={false}>
              Third
            </NavLink>
          </NavItem>
        </Nav>
      </ScrollSpy>

      {/* The content with anchors */}
      <div className="overflow-auto px-2" style={{ maxHeight: 130 }}>
        <div id="scrollspyTabsSection1" className="pb-3">
          <h5>First heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspyTabsSection2" className="pb-3">
          <h5>Second heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspyTabsSection3">
          <h5>Third heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
      </div>
    </>
  )
}

Pills

First
Second
Third
First heading

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.

Second heading

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.

Third heading

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.

'use client'

import ScrollSpy from '@/components/scrollspy'
import Nav from 'react-bootstrap/Nav'
import NavItem from 'react-bootstrap/NavItem'
import NavLink from 'react-bootstrap/NavLink'

export default function ScrollspyNavbarDemo() {
  return (
    <>

      {/* Nav pills wrapped in ScrollSpy  */}
      <ScrollSpy activeClass="active">
        <Nav variant="tabs" className="mb-4" style={{ maxWidth: 350 }}>
          <NavItem>
            <NavLink href="#scrollspyPillSection1" active={false}>
              First
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#scrollspyPillSection2" active={false}>
              Second
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="#scrollspyPillSection3" active={false}>
              Third
            </NavLink>
          </NavItem>
        </Nav>
      </ScrollSpy>

      {/* The content with anchors */}
      <div className="overflow-auto px-2" style={{ maxHeight: 130 }}>
        <div id="scrollspyPillSection1" className="pb-3">
          <h5>First heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspyPillSection2" className="pb-3">
          <h5>Second heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
        <div id="scrollspyPillSection3">
          <h5>Third heading</h5>
          <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&apos;s repeated throughout the component example. We keep adding
            some more example copy here to emphasize the scrolling and highlighting.
          </p>
        </div>
      </div>
    </>
  )
}
Top