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 Dropdown to find out.

arrow&v

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

( Connection by Dataset )

Unfortunately, at this time, Wix does not allow us to select seperate 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 settings for our dropdown look like this . . . 

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.

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.

Test our 2nd Dropdown.

arrow&v

Careful!  This dropdown is connected to code, so it will change the page if you select one!

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 creative help with your project?

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

corvid support

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