Linked side ‘breadcrumb’ nav section?

Ask the community
3

Hi @tmgilchrist69214 ! Here is the code I used to solve your issue:

$w . onReady ( function () {

let  menuArray  = [ 
    {  label :  'Section 1' ,  selected :  **false**  }, 
    {  label :  'Section 2' ,  selected :  **false**  }, 
    {  label :  'Section 3' ,  selected :  **false**  }, 
    {  label :  'Section 4' ,  selected :  **false**  }, 
]; 

let  textElements  = [ $w ( '#textA' ),  $w ( '#textB' ),  $w ( '#textC' ),  $w ( '#textD' )] 

textElements . forEach (( text ,  index ) => { 

    $w ( '#expandableMenu2' ). onItemClick ( event  => { 
        let  label  =  event . item . label ; 

        if  ( label  ===  menuArray [ index ]. label ) { 
            text . scrollTo (); 
        } 
    }) 

    text . onViewportEnter (() => { 
        menuArray [ index ]. selected  =  **true** ; 
        $w ( '#expandableMenu2' ). menuItems  =  menuArray ; 
    }) 

     text . onViewportLeave (() => { 
        menuArray [ index ]. selected  =  **false** ; 
        $w ( '#expandableMenu2' ). menuItems  =  menuArray ; 
    }) 
})

});

Make sure the element IDs match the IDs in your code!!!

Here is how this code behaves in the live site: https://noamav.editorx.io/my-site-53

I hope this helps!