To add the Search Dropdown Element, simply type "search" and drag Search Dropdown to the canvas.
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:
This is the dropdown search form that appears when the toggle is clicked:
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...
Below is the Setup box for the toggle:
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.
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.
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:
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:
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):
Then go to the Graphic Icon control group and choose an icon on the Primary & Secondary field:
Lastly, if you wish to use custom images instead you can go back to Graphic Setup and click on the middle button on Type:
Then go to Primary Graphic Image then click the box to select the image you want to use:
The dropdown itself can be configured by clicking the Dropdown tab as shown below...
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:
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.
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:
For the Search Dropdown Element, the Submit is the magnifying glass icon and the Input is the textbox where you enter your search term:
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:
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:
On the Content control group you'll be able to change the placeholder text for the input rather than just having it say "Seach."
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:
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.
- 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
searchin the input and then add
#searchto 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
$elas 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.
To see a live demo of the Search Dropdown Element click here.
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