---
title: "Scrollspy"
description: "Scrollspy component for navigation."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 2
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-scrollspy"
---

{# Define the contents for the sections #}
{% set section_content_introduccion %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="https://www.example.com/" target="_blank">Quisquam, quos.</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_features %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><strong>Lorem  Ipsum</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
{% endset %}

{% set section_content_options %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li><code>Lorem</code>: Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_usage %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ol>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ol>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{% set section_content_advanced %}
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    </ul>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
{% endset %}

{# Example 1: Vertical Scrollspy #}
<twig:block-scrollspy
    class="my-4 shadow-none"
    style="--scrollspy-list-active-bg: #0066cc;"
    height="100vh"
    :cols="3"
    :sections="[
        {
            id: 'introduction',
            title: 'Lorem ipsum dolor sit amet',
            content: section_content_introduction
        },
        {
            id: 'features',
            title: 'Lorem',
            content: section_content_features
        },
        {
            id: 'options',
            title: 'Lorem',
            content: section_content_options
        }
    ]"
/>

<hr class="my-4"/>

{# Example 2: Horizontal Scrollspy #}
<twig:block-scrollspy
    class="my-4 shadow "
    style="--scrollspy-list-active-bg: #6610f2;"
    height="300px"
    orientation="horizontal"
    :cols="12"
    :sections="[
        {
            id: 'introduction-h',
            title: 'Lorem ipsum dolor sit amet',
            content: section_content_introduction,
        },
        {
            id: 'features-h',
            title: 'Lorem',
            content: section_content_features,
        },
        {
            id: 'options-h',
            title: 'Lorem',
            content: section_content_options,
        },
            {
            id: 'usage-h',
            title: 'Lorem',
            content: section_content_usage,
        }
    ]"
/>



---
Last updated on 09/09/2026