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

Trigger navigation by Query method


For this method you don't need any extra datasets on your page.  This method assumes that you are using the Title of the item as the value listed in your dropdown (regardless if you manually created the options or if connected it via the Dataset settings). What we will do is create a query code to search for this Title in the database to retrieve the appropriate URL in order to navigate to it.




Code if URL is from a custom Text or URL field



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

$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.

  wixData.query("wix") //This is the name of your database collection. Case sensitive.
   .eq("title", title)
   .find()
   .then((results) => {
    console.log("Query is complete.");
 if (results.items.length > 0) {
     console.log("Query is returned " + results.items.length + " results in total.");
 let firstItem = results.items[0]; //This line gets the first item of the results.
 let linkField = "link-wix-corvid-title" //This line sets a variable for your field key.  Find your field key in the database.
 let url = firstItem[linkField];  //This line gets the correct URL variable from the item result.
     wixLocation.to(url);
    } else {
 // handle case where no matching items found
    }
   })
   .catch((err) => {
 let errorMsg = err;
   });
 });

});



Code if URL is a Wix dynamic ending



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

$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.

  wixData.query("wix") //This is the name of your database collection. Case sensitive.
   .eq("title", title)
   .find()
   .then((results) => {
    console.log("Query is complete.");
 if (results.items.length > 0) {
     console.log("Query is returned " + results.items.length + " results in total.");
 let firstItem = results.items[0]; //This line gets the first item of the results.
 let linkField = "link-wix-corvid-title" //This line sets a variable for your field key.  Find your field key in the database.
 let url = firstItem[linkField];  //This line gets the correct URL variable from the item result.
     wixLocation.to(url);
    } else {
 // handle case where no matching items found
    }
   })
   .catch((err) => {
 let errorMsg = err;
   });
 });

});



Good to Know #3

Trigger navigation by manually setting URL as value in Dropdown


This is the code for the live example we have on our tutorial page found here:  https://www.totallycodable.com/example-dropdown-navigation


For this method, your value just either be a complete URL in https:// format, or a partial URL leading to another Wix page of your current website.




import wixLocation from 'wix-location';
let location;

$w.onReady(function () {
 $w("#dropdownManual").onChange((event) => {
 let url = $w('#dropdownManual').value;
  wixLocation.to(url);
 });
});
 

Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

2,390 views0 comments

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.