Anchor menu

The anchor menu keeps track of its position and display to the user which part of the page is active.
The items in the menu will only show when the there is a matching element on the page.

Image

Label 1 Label 2

Label 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi non magna dapibus luctus vel vel orci. Ut cursus massa quis felis accumsan, vitae commodo augue mattis. Etiam hendrerit risus non eros hendrerit pellentesque ut at lectus. Sed sit amet sollicitudin est. Fusce gravida dignissim mauris nec porta. Curabitur nec purus nisi. Nulla mi libero, bibendum eget lectus ac, tempus accumsan quam. Cras accumsan ultrices nisl sed varius. Vestibulum dignissim, elit eu interdum imperdiet, nulla purus ultricies metus, vel tempor nisl est in velit. Phasellus vel eleifend nibh. Vestibulum ultricies varius lectus id faucibus. Nullam ut massa eget ipsum tincidunt ornare. Vestibulum vitae libero in felis dapibus vehicula aliquet vitae odio.

Label 2

<!-- anchorMenu.blade.php -->
    <div class="c-anchormenu" id="scroll-spy" data-uid="692628544f06b">
            <!-- group.blade.php -->
<div class="c-group c-anchormenu__container c-group--horizontal c-group--flex-wrap-wrap" data-uid="692628544f1ae">
    <a class="c-link c-anchormenu__item" href="#label1" target="_top" data-uid="692628544f105">
        Label 1
    </a>
                        <a class="c-link c-anchormenu__item" href="#label2" target="_top" data-uid="692628544f14c">
        Label 2
    </a>
</div>    </div>

<div class="u-margin__top--6 u-margin__bottom--4" id="label1">
    <h2>
        Label 1
    </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi non magna dapibus luctus vel vel orci. Ut cursus massa quis felis accumsan, vitae commodo augue mattis. Etiam hendrerit risus non eros hendrerit pellentesque ut at lectus. Sed sit amet sollicitudin est. Fusce gravida dignissim mauris nec porta. Curabitur nec purus nisi. Nulla mi libero, bibendum eget lectus ac, tempus accumsan quam. Cras accumsan ultrices nisl sed varius. Vestibulum dignissim, elit eu interdum imperdiet, nulla purus ultricies metus, vel tempor nisl est in velit. Phasellus vel eleifend nibh. Vestibulum ultricies varius lectus id faucibus. Nullam ut massa eget ipsum tincidunt ornare. Vestibulum vitae libero in felis dapibus vehicula aliquet vitae odio.
</div>

<div id="label2">
    <h2>
        Label 2
    </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi non magna dapibus luctus vel vel orci. Ut cursus massa quis felis accumsan, vitae commodo augue mattis. Etiam hendrerit risus non eros hendrerit pellentesque ut at lectus. Sed sit amet sollicitudin est. Fusce gravida dignissim mauris nec porta. Curabitur nec purus nisi. Nulla mi libero, bibendum eget lectus ac, tempus accumsan quam. Cras accumsan ultrices nisl sed varius. Vestibulum dignissim, elit eu interdum imperdiet, nulla purus ultricies metus, vel tempor nisl est in velit. Phasellus vel eleifend nibh. Vestibulum ultricies varius lectus id faucibus. Nullam ut massa eget ipsum tincidunt ornare. Vestibulum vitae libero in felis dapibus vehicula aliquet vitae odio.
</div>

@anchorMenu([
    'menuItems' => [
        ['label' => 'Label 1', 'anchor' => '#label1'],
        ['label' => 'Label 2', 'anchor' => '#label2'],
    ]
])
@endanchorMenu

<div class="u-margin__top--6 u-margin__bottom--4" id="label1">
    <h2>
        Label 1
    </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi non magna dapibus luctus vel vel orci. Ut cursus massa quis felis accumsan, vitae commodo augue mattis. Etiam hendrerit risus non eros hendrerit pellentesque ut at lectus. Sed sit amet sollicitudin est. Fusce gravida dignissim mauris nec porta. Curabitur nec purus nisi. Nulla mi libero, bibendum eget lectus ac, tempus accumsan quam. Cras accumsan ultrices nisl sed varius. Vestibulum dignissim, elit eu interdum imperdiet, nulla purus ultricies metus, vel tempor nisl est in velit. Phasellus vel eleifend nibh. Vestibulum ultricies varius lectus id faucibus. Nullam ut massa eget ipsum tincidunt ornare. Vestibulum vitae libero in felis dapibus vehicula aliquet vitae odio.
</div>

<div id="label2">
    <h2>
        Label 2
    </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi non magna dapibus luctus vel vel orci. Ut cursus massa quis felis accumsan, vitae commodo augue mattis. Etiam hendrerit risus non eros hendrerit pellentesque ut at lectus. Sed sit amet sollicitudin est. Fusce gravida dignissim mauris nec porta. Curabitur nec purus nisi. Nulla mi libero, bibendum eget lectus ac, tempus accumsan quam. Cras accumsan ultrices nisl sed varius. Vestibulum dignissim, elit eu interdum imperdiet, nulla purus ultricies metus, vel tempor nisl est in velit. Phasellus vel eleifend nibh. Vestibulum ultricies varius lectus id faucibus. Nullam ut massa eget ipsum tincidunt ornare. Vestibulum vitae libero in felis dapibus vehicula aliquet vitae odio.
</div>

Blade component parameters

Key	Default value	Type	Available values	Description
menuItems	[]	array	-	An array containing arrays of items. An item should contain a label, anchor and if wanted an icon as well.
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/AnchorMenu/anchorMenu.json