So another little free tip from us at Wix Show today. If you want to create your own custom menu navigation control in Wix you can.
We thought about this and discovered that you can use the SiteStructure from your site to create your own menu navigation control using the repeaters.
We just loop through the SiteStructure object and get all the pages, then we populate the repeaters and add the events needed and voila! It works! Use this snippet and free course to get started creating your own menu navigation. Wix Code Rocks!
Preview of my own custom navigation in Wix Code.
Some parts of the code to accomplish this
See the full and free small snippet and course at Wix Show, linked below! It’s totally free!
https://wixshow.com/courses/small-free-snippets/lectures/4146449
Awesome! I’ve been looking for an easier way to create custom navigation, so thank you! I’m just wondering how this works for sites with subpages? Is it possible to make custom dropdowns for the subpages? And if so, can I specify that the dropdown menu be a different font and style from the main page navigation?
That is awesome! Can you please advise on how can I select only specific pages according to their name?
if (entry.type === “static” && entry.name contains “ES”). What I’m trying to achieve is to build a menu for a multilingual site. For now ordinary menu should be replaced with buttons which is not very convenient, especially because you loose pretty handy mobile menu.
Hi Dmitry,
You can use JavaScript’s filter function on the array of pages, and within it check the name of the page.
In this example, I checked that the page starts with ES:
import wixSite from 'wix-site';
$w.onReady(function () {
let pages = wixSite.getSiteStructure().pages;
let ESPages = pages.filter((page)=>{return page.name.startsWith('ES');});
//ESPages now contains the list. From here on you can push the data into the repeater like Andreas demonstrated
console.log(ESPages);
});
Hey Andreas - is it possible to get an updated link to the snippet and wix show above? I’m having trouble getting a custom menu to appear beyond the homepage (acesinaction.com/home) and thought this might be the ticket… Thx! Craig
Hi Andreas, you’re site link doesnt work. Could you update it ?
I’d love to see this but the link isn’t working could you please update it
This is an old post and the original posted is no longer active on this forum. I am closing this post.
You can find examples to play with here:
