Search Dropdown

In this article, we're going to show you how to use the Search Dropdown Element to add a dropdown search that displays when the toggle button is clicked.

  1. Toggle Settings
  2. Dropdown Settings
  3. Input Settings
  4. Customize
  5. Demo
  6. Summary

To add the Search Dropdown Element, simply type "search" and drag Search Dropdown to the canvas.

Search Dropdown Element

The Search Dropdown Element lets you display a search form in a dropdown that appears when a toggle is clicked. This is a toggle button:

Search Dropdown Example Retracted

This is the dropdown search form that appears when the toggle is clicked:

Search Dropdown Example

Toggle Settings

The button that triggers the display of the dropdown is called a toggle. This button can be configured by clicking the Toggle tab as shown below...

Search Dropdown Toggle Setup

Below is the Setup box for the toggle:

Search Dropdown Advanced Setup

In the Setup field group shown above, you'll be able to set the actual height and width of the toggle, its minimum and maximum dimensions, standard and interactive background color, and more. The Base Font Size field dictates the size of the toggle.

The Content Flex Layout field group allows you to configure the flexbox settings of the toggle button. If you're not familiar with Flexbox, this guide will help you.

The Margin, Padding, Border, Border Radius and Box Shadow field groups are common across majority of the V2 elements that I won't expound them here.

Now by default, the toggle has a "hamburger" graphic inside it. You have the option to remove the icon and use text instead. To do that, you need to turn On the Text Setup and turn Off the Graphic Setup.

Search Dropdown Text SetupSearch Dropdown Graphic Setup

When you turn On the Text Setup, other fields/settings will appear which will allow you to set the primary text, secondary text, the spacing & order as well as how to handle interactions and overflows.

Search Dropdown Advanced Text Setup

You'll also notice that several groups of controls become available to you as well, such as:

  • Text Margin - Use this option to set the margin of the search Dropdown text. You can change the settings for all the sides of the button's text or modify them individually.
  • Primary Text Format - You can use this control group to set the format and styling of the primary text for the Search Dropdown.
  • Primary Text Shadow - The primary text shadow control group contains settings to set a text shadow for the Search Dropdown primary text.
  • Secondary Text Format - You can use this control group to set the format and styling of the secondary text for the Search Dropdown.
  • Secondary Text Shadow - The secondary text shadow control group contains settings to set a text shadow for the Search Dropdown secondary text.

What if you want to have both the icon and text? Is it possible? Indeed it is! Simply enable both the Text Setup and Graphic Setup and you'll have both of them appear on the toggle:

Search Dropdown Example

Want to change the hamburger graphic? That's easy and you have multiple ways to do it. Go to the Graphic Toggle control group and make a selection from the Type dropdown:

Search Dropdown Graphic Toggle Burger

If none of the Graphic Toggle types fit your needs, go back to Graphic Setup and click on the flag icon on the Type field (which will enable standard icons):

Search Dropdown Graphic Setup Icons

Then go to the Graphic Icon control group and choose an icon on the Primary & Secondary field:

Search Dropdown Graphic Setup Icon Picker

Lastly, if you wish to use custom images instead you can go back to Graphic Setup and click on the middle button on Type:

Search Dropdown Graphic Setup Image

Then go to Primary Graphic Image then click the box to select the image you want to use:

Search Dropdown Graphic Setup Pick Image

The dropdown itself can be configured by clicking the Dropdown tab as shown below...

Search Dropdown Settings

Here you will find plenty of options to alter the appearance of the dropdown as you see fit. In the image below we've set a custom background color and added some padding so that we can see it, introduced some border radius to round things out, and utilized the First Dropdown Margin control to nudge the dropdown away from the toggle a bit:

Search Dropdown Styling Example

You'll notice we can also do thigns like set the Font Size for the dropdown and the Width. Beyond that, you have full access to familiar controls such as Border, Box Shadow, et cetera.

Input Settings

You can also configure the search form, namely its text input and the search button. To view the input settings, simply click on the Search Tab:

Search Dropdown Input Settings

For the Search Dropdown Element, the Submit is the magnifying glass icon and the Input is the textbox where you enter your search term:

Search Dropdown Input Example

It's important to make the distinction between the two because we'll quickly run through the settings available for both later. When you're on the Search tab, you'll see a Setup control group that looks like this:

Search Dropdown Setup

When you make adjustments to any of these, the entire search box (containing both the Submit and Input) will be affected. See an example below:

Search Dropdown Setup with Example

On the Content control group you'll be able to change the placeholder text for the input rather than just having it say "Seach."

Search Dropdown Content Tab with Example

Input Placement refers to where the input should be located while Submit Placement refers to there the submit button should be located.

Other settings such as Margin, Border, Border Radius and Box Shadow are available here as well.

Input Margin and Input Text Format** all allow you to configure the input textbox:

Search Dropdown Input Margin and Text Format

Want to make the text all caps? You can change it using the Text Decoration setting. Want to change the Font Family and Font size? Just go to Input Text Format and make the changes there. The possibilities are virtually endless.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Search Dropdown Customize
  • Toggle Hash - Allows you set a custom value that can open the dropdown by linking to it in the URL. For example, if you put search in the input and then add #search to the end of the URL you're linking to, this would automatically open the dropdown when the page loads. Additionally, you could add a matching ID value, which would also make the page scroll to and open the dropdown when the page loads. Alternately, you could set separate values for each if you needed to target these mechanics separately.
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Search Dropdown Element click here.

Summary

In this article, you've learned enough of the settings available to you on the Search Dropdown element. While we didn't dive in great detail to every option, you know enough to get started using this element and to customize it to your liking.

See something inaccurate? Let us know