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