Linked side ‘breadcrumb’ nav section?

Ask the community
1

I have a brief to create a new site that is all one, principal page.
To keep the description simple, the content is supposed to be a linear user progression from top to bottom.

What the client wants, is a “where you are now” content list on the left side of the screen, with a highlight state following the client’s scroll position as they progress down the page.

It makes sense, for what the client is trying to achieve and doesn’t have to work on mobile, but I don’t know how to link, say, page sections, to a particular menu item and have that menu item highlight. I have to assume it’s a job for JavaScript, which I don’t do.

Anyone have any ideas how this might be executed? Happy to pay going rate for the code chunk via Venmo if it’s doable.

many thanks In advance :blush:

2169×1694 231 KB

2

If I’m understanding correctly, this sounds like an anchor menu: https://support.wix.com/en/article/editor-x-adding-and-using-anchors

You would have different sections or elements as the anchors and then the anchor menu will show were you are while scrolling up and down. It would work on mobile too if you use a complementary design that doesn’t clash with the page.

Note that linking to an anchor is a feature request at the moment if that’s something your client needed for this project.

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!