Dropdown With Option to Navigate to Different Fields In Form

This guide will show how to create a drop-down list to navigate to different sections of a form. Create a navigation bar with a drop-down list using Bootstrap. Add necessary styling.

<style>
    /* Add this CSS to adjust scrolling for hash navigation */
    :target::before {
      content: "";
      display: block;
      height: 70px;
      /* Adjust this value to match your Navbar height */
      margin: -70px 0 0;
      /* Negative margin to account for Navbar height */
    }
  </style>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li class="dropdown-header"><a href="#component-6cbe-c4da-978a">Text Field</a></li>
              <li class="dropdown-header"><a href="#component-5a47-3f1a-8196">Phone Field</a></li>
              <li class="dropdown-header"><a href="#component-334a-264e-9f64">Multi-select Field</a></li>
            </ul>
          </li>
        </ul>
    </div>
  </nav>

In the code, there are three list items in the dropdown menu list. Each Item has a hyperlink pointing to a particular field. Replace the component-id with your field id. It will scroll to that field. If we select the text field from the menu, It will scroll to the text field.

If we select the phone field, it will scroll to the phone field.

Similarly, we can add options on the drop-down to navigate to different form fields.

Also, we can add a header to a section of the form with a group of fields and scroll to the section header. Customize the Navbar according to your need.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂