top of page
topanchor

dropdown navigation

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 trigger navigation using a dropdown element on Wix.

" This tutorial (example) page was inspired by YouTube fan and follower.  Thank you Lucas Martins!"

THE QUESTION

" I am trying to create a simple dropdown list that will serve as buttons that direct to other pages. How can I do this? "

LET'S ANALYZE

A Corvid dropdown element can be connected to a list of options from a specific dataset or the options can be added manually via the 'manage choices' settings icon.  If the dropdown is being managed manually by entering choices via the settings icon, then we have a convenient way of setting the value to be a complete or partial URL.   This would make it easy to create a code that will get the value of the dropdown and redirect to that value.   But what happens if a dropdown element is connected via a Dataset instead?

TEST OUR 1ST DROPDOWN TO FIND OUT

Don't worry, there is no code on this dropdown, so you won't navigate anywhere.

Unfortunately, at this time, Wix does not allow us to select separate values for the dropdown label and the dropdown value when connecting directly with a dataset linked to a database collection.   This would seem the best way to connect the dropdown, but then we would only see the URL in the dropdown choices instead of an actual label.  If that wasn't enough of a bummer,  Wix does not allow us to select a URL field for the dropdown options either!  For our test dropdown above, we created a TEXT field with a partial URL to give you a visual of what that would look like.

THE CURRENT DROPDOWN SETTINGS LOOK LIKE THIS

connection dropdown.PNG

TEST OUR 2ND DROPDOWN

Now let's test a dropdown that has a (shorter) manually entered list of options with the title as the label and a complete URL as the value. Careful!  This dropdown is connected to code, so it will change the page if you select one!

Depending how long your list of choices will be, you will have to decide which connection method works best for you.  Our tutorial will show you example code for both types of connections.

OUR TUTORIAL

Our tutorial example code will show you how to:

​

  • Navigate by creating a Dataset Filter on the Dataset connected to the Dropdown element

    • Example included for Text or URL field

    • Example included for Wix Dynamic page URL link field

  • Navigate by creating a Query on the value from Dropdown element to find get URL value from database

    • Example included for Text or URL field

    • Example included for Wix Dynamic page URL link field

  • Navigate by manually setting a URL as the value in the Dropdown element

NEED HELP?

Code Queen is available for hire if you need private help, project planning, troubleshooting, design or coding work completed.

​

If you prefer free help from the Velo community please consider joining the free Velo Totally Codable Forum or the Totally Codable Facebook group.

bottom of page