Use Dropdowns to Navigate via Dataset Filter or Query (URL text or Dynamic Page URL link field)

Updated: Sep 14, 2020


Tutorial Video

Creating custom navigation with buttons and dropdown elements is very popular on Corvid by Wix. This allows the ability to recreate multiple navigation menu bars by skipping the default Wix menu widget. Learn how to use dropdowns to navigate to another page on Wix with only 8 lines of code.


Follow Along #1

Tutorial Page

https://www.totallycodable.com/example-dropdown-navigation


 

Good to Know #1

Trigger navigation by Dataset Filter


For this method to work, you must have 2 datasets on your page.  Connect both datasets to the same database collection.  One dataset will be used to connect to your dropdown list settings.  The other dataset will be used as a reference to simply filter and get the URL value from it.





We connected our dropdown list using the settings.  Then we changed our dropdown ID toTriggerFilter using the properties panel.




Code if URL is from a custom Text or URL field


Line #17 in our code below shows .url meaning that we are searching through our database collection for the field key called url.  Simply change this to whatever your field key is.



import wixLocation from 'wix-location';
import wixData from 'wix-data';
let filter;

$w.onReady(function () {
 
 $w("#toTriggerFilter").onChange((event) => {
 let title = $w('#toTriggerFilter').value; //This line gets the current Title value of the dropdown option that was selected.
  $w("#toFilter").onReady(() => {
   console.log("The dataset is ready to be filtered."); //This line tells us our dataset is ready to be filtered.

   $w("#toFilter").setFilter(wixData.filter()
     .eq("title", title) //This line looks for matching titles in the database collection so that now it is only displaying 1 result
    )
    .then(() => {
     console.log("To filter dataset is now filtered with the matching title from the dropdown.");
 let getItem = $w("#toFilter").getCurrentItem(); /This line gets the 1 result we should have in our filtered dataset
 let url = getItem.url; //This line gets the URL field for that 1 result
     wixLocation.to(url); //This line redirects us to the URL
    })
    .catch((err) => {
     console.log(err);
    });

  });
 });

});



Code if URL is a Wix dynamic ending




import wixLocation from 'wix-location';
import wixData from 'wix-data';
let filter;

$w.onReady(function () {
 
 $w("#toTriggerFilter").onChange((event) => {
 let title = $w('#toTriggerFilter').value; //This line gets the current Title value of the dropdown option that was selected.
  $w("#toFilter").onReady(() => {
   console.log("The dataset is ready to be filtered."); //This line tells us our dataset is ready to be filtered.

   $w("#toFilter").setFilter(wixData.filter()
     .eq("title", title)
    )
    .then(() => {
     console.log("To filter dataset is now filtered with the matching title from the dropdown. " + url);
 let linkField = "link-wix-corvid-title" //This line sets a variable for your field key.  Find your field key in the database.
 let getItem = $w("#toFilter").getCurrentItem(); //This line gets the current item after the dataset has been filtered.
 let url = getItem[linkField];
     wixLocation.to(url);
    })
    .catch((err) => {
     console.log(err);
    });

  });
 });

});


 

Good to Know #2