How to create a drop-down list box with links

Written by craig witt
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to create a drop-down list box with links
Create a drop-down list with links using HTML and JavaScript. (laptop image by Ewe Degiampietro from

Most websites present navigation items using blocks of options that run either across the top of the page or down one of its sides. Because these navigation structures present all available options, they offer a large amount of contextual information. However, they also occupy considerable screen space. Designers with a limited amount of room may instead choose to use drop-down menus containing a list of items that only expands when selected. Create this kind of navigation structure on your web page using HTML and JavaScript.

Skill level:

Other People Are Reading


  1. 1

    Open your web page and view its code. If you use a text editor, simply open your page in the editor and select the line of code where you want the drop-down menu added. If you use a visual web editor instead (for example Adobe Dreamweaver or Microsoft Expression Web), open your page and click on the page location where you want the drop-down menu to appear. After doing so, change your viewing mode to Code View. This shows you the HTML code that determines the content and appearance of your page.

  2. 2

    Press the "Enter" key to create a blank line.

  3. 3

    Copy and paste the following code onto the blank line:

    <form name="link"> <select name="menu"> <option selected>Select your link</option> <option value="">Sample website 1</option> <option value="">Sample website 2</option> <option value="">Sample website 3</option> </select> <input type="button" onClick="[].value;" value="Go"> </form>

  4. 4

    Update the link parameters to meet your design needs. Enter the default text at the top of the list by modifying the value directly after the <option selected> tag; change the URL of each subsequent item by adjusting the corresponding value parameter; and replace the "Sample website" text with your desired link text. You can also replace the text contained in the value parameter of the <input> tag to update the text that appears on the "Submit" button.

  5. 5

    Save your web page and then open it in your browser. Select an option from the drop-down list and then click the adjacent button to access the selected item.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.