Scrollspy

Twitter bootstrap Documentation

Example in navbar

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->navbar()->render(
    new \Laminas\Navigation\Navigation(
        [
            ['label' => 'First', 'uri' => '#scrollspyHeading1', 'active' => true],
            ['label' => 'Second', 'uri' => '#scrollspyHeading2'],
            [
                'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
                'label' => 'Dropdown',
                'dropdown' => [
                    'items' => [
                        'Third' => ['attributes' => ['href' => '#scrollspyHeading3']],
                        'Fourth' => ['attributes' => ['href' => '#scrollspyHeading4']],
                        '---',
                        'Fifth' => ['attributes' => ['href' => '#scrollspyHeading5']],
                    ],
                ],
            ],
        ],
    ),
    [
        'brand' => 'Navbar',
        'expand' => false,
        'toggler' => false,
        'collapse' => false,
        'nav' => [
            'pills' => true,
        ],
        'attributes' => ['id' => 'navbar-example2', 'class' => 'px-3'],

    ]
);

echo '<div class="scrollspy-example" data-bs-offset="0" data-bs-spy="scroll" ' .
'data-bs-target="#navbar-example2" tabindex="0">';
foreach (
    [
        'First heading',
        'Second heading',
        'Third heading',
        'Fourth heading',
        'Fifth heading',
    ] as $key => $label
) {
    echo '    <h4 id="scrollspyHeading' . ($key + 1) . '">' . $label . '</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>';
}
echo '</div>';

Example with nested nav

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->gridRow([
    [
        $this->navigation()->navbar()->render(
            new \Laminas\Navigation\Navigation(
                [
                    [
                        'label' => 'Item 1',
                        'uri' => '#item-1',
                        'active' => true,
                        'pages' => [
                            ['label' => 'Item 1-1', 'uri' => '#item-1-1', 'class' => 'ms-3 my-1'],
                            ['label' => 'Item 1-2', 'uri' => '#item-1-2', 'class' => 'ms-3 my-1'],
                        ],
                    ],
                    ['label' => 'Item 2', 'uri' => '#item-2'],
                    [
                        'label' => 'Item 3',
                        'uri' => '#item-3',
                        'pages' => [
                            ['label' => 'Item 3-1', 'uri' => '#item-3-1', 'class' => 'ms-3 my-1'],
                            ['label' => 'Item 3-2', 'uri' => '#item-3-2', 'class' => 'ms-3 my-1'],
                        ],
                    ],
                ],
            ),
            [
                'brand' => 'Navbar',
                'expand' => false,
                'toggler' => false,
                'collapse' => false,
                'nav' => [
                    'vertical' => true,
                    'pills' => true,
                    'list' => false,
                ],
                'attributes' => ['id' => 'navbar-example3', 'class' => 'align-items-stretch flex-column p-3'],
            ]
        ),
        ['column' => 4],
    ],
    [
        '<div class="scrollspy-example-2" data-bs-offset="0" data-bs-spy="scroll" ' .
        'data-bs-target="#navbar-example3" 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>' .
        PHP_EOL .
        '    <h5 id="item-1-1">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h5 id="item-1-2">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h4 id="item-2">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h4 id="item-3">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h5 id="item-3-1">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h5 id="item-3-2">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '</div>',
        ['column' => 8],
    ],
]);

Example with list-group

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->gridRow([
    [
        $this->listGroup([
            'Item 1' => ['attributes' => ['href' => '#list-item-1'], 'active' => true],
            'Item 2' => ['attributes' => ['href' => '#list-item-2']],
            'Item 3' => ['attributes' => ['href' => '#list-item-3']],
            'Item 4' => ['attributes' => ['href' => '#list-item-4']],

        ], ['type' => 'action', 'id' => 'list-example']),
        ['column' => 4],
    ],
    [
        '<div class="scrollspy-example" data-bs-offset="0" data-bs-spy="scroll" ' .
        'data-bs-target="#list-example" tabindex="0">' .
        '    <h4 id="list-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>' .
        PHP_EOL .
        '    <h4 id="list-item-2">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h4 id="list-item-3">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\'s repeated throughout the component example. ' .
        'We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>' .
        PHP_EOL .
        '    <h4 id="list-item-4">Item 4</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>' .
        PHP_EOL .
        '</div>',
        ['column' => 8],
    ],
]);