Tailored selection panel

Webflow provides a ready-made selection feature that you can easily place on your navigation bar or any section of your webpage. This empowers you to craft a customized selection panel swiftly.

Nevertheless, for those who desire more authority in constructing, styling, and handling their selection panel, this tutorial will guide you through building a personalized selection panel!

Prerequisite

• You’ll utilize block elements to fabricate the personalized selection component
• You’ll insert some anchor elements inside the selection content container
• You’ll also employ actions to enable the selection panel to function — opening and closing upon activation

Throughout this tutorial

To create a tailored selection panel, you’ll:

1. Establish the selection container
2. Develop the selection trigger
3. Construct the selection content container
4. Initiate the action to toggle the selection panel

Establish the selection container

1. Integrate your initial block element from the add elements section.
2. Assign a class name. This will be referred to as the “selection wrapper”.
3. Specify a width dimension
4. Adjust the position to: relative — this facilitates the absolute positioning of the forthcoming “selection content” container.

Discover more: Insights on positioning

Design suggestion
When setting a fixed width, ensure to cap the max-width at 100% or below. This way, you prevent the element from exceeding the width on smaller devices. Conversely, you can set the width to 100% and the max-width to a specific value like 500px or 1200px. This ensures that text lines don’t stretch on larger screens or images don’t surpass their original clarity.

Develop the selection trigger

1. Insert a second block element inside the selection wrapper — carry this out in the navigator as the selection wrapper lacks canvas height.
2. Apply a class to this block element. We’ve named it “selection trigger”.
3. Drop a text element into the selection trigger. Double-click to modify the text.
4. Add stylization such as a background shade (or a pattern or gradient) to the selection trigger block element
5. Provide spacing to your text by adding some padding

Structural hint
You can include various content in the selection trigger. You can even leave it blank. For instance, you could insert an icon or another text element saying close.

Refine the hover status and alter the cursor appearance of the trigger

You can enhance the hover status of the selection trigger to entice users to click upon hovering.

Explore more: Stylizing statuses

Perhaps you think the typical mouse cursor seems odd during selection hover. You can opt to modify the type of cursor used within the trigger block element. For links, the pointer cursor is typically preferred. Alternatively, any cursor type can be selected.

Learn more: Pointers

Forging the selection content container

1. Insert a fresh block element right within the selection wrapper and position it below the selection trigger.
2. Define a class named dropdown content
3. Ensure the position is absolute — this prevents the selection from displacing other content on the page
4. Set the width to 100% to occupy all accessible space within the selection wrapper
5. Set the overflow to hidden — this proves beneficial when setting up the action later
6. Include a background shade if desired

Learn more: Overflow

Incorporating content

The content can vary. Here, a few anchor elements will be incorporated.

1. Drape an anchor element from the panel and position it within your selection content container
2. Attribute a class to the anchor element. We’ll denote this as “dropdown link”, but you can insert any desired name.
3. Adjust the display setting to block to fill the entire width of the selection content container
4. Apply uniform padding on all four sides by holding shift and dragging
5. Insert a text element into your anchor element
6. Replicate the anchor element and paste it multiple times to cater to the required links in your selection
7. Double-click each text element to rename every selection link
8. Anchor each anchor element to the relevant resource

Refer to: Our guide on configuring link settings for various link elements

Customizing the link text

Links inherit their style from the all links tag. Thus, modifying the text element nested within an anchor element won’t override the all links text styles. To style the text within an anchor element, the typography of the anchor element itself must be styled.

1. Select the anchor element (the dropdown link)
2. Alter the text hue
3. Eliminate the underline (text-decoration) to None to eliminate the link underline

Unearth further insights

• Text style inheritance
• HTML tags

Establishing the action to toggle the selection

Create an action triggering upon selection by the designated element, occurring upon mouse click (or tap). To construct this:

1. Select the selection trigger
2. Initiate an action: element trigger: mouse click (tap)

Yet, I desire to toggle my selection panel on hover instead of click

The forthcoming animations will be identical but at this juncture, opt for the selection wrapper and select element trigger: mouse hover. Subsequently, proceed with the following steps.

Unveil the selection

1. Under on 1st click (or on hover), establish a new animation. Name it selection open.
2. Select your selection content block element
3. Inaugurate the initial animation action: size
4. Set the height to zero (0 px). Given that overflow is hidden on the selection content, it discreetly vanishes.
5. Assign this as the initial state to prevent the selection content from appearing at page load
6. Create the subsequent animation action: size
7. Designate the height as auto — manually input “auto” into the field and hit enter. Alternatively, tap the unit adjacent to the field and opt for auto from the unit list.

Conceal the selection

1. Beneath on 2nd click (or on hover out), integrate a new timed animation. Label this as selection close.
2. Select the selection content
3. Formulate an animation action: size
4. Revert the height back to 0 px

Essential to understand
You can adapt the easing and duration of any animation action to create a distinctive animation during selection toggling. 

‍

Proceeding forward

Now that you’ve grasped creating a personalized selection panel, you can expand upon this approach to craft more sophisticated elements like an expansion module ideal for FAQs.

References

• Erecting an expansion module
• Establishing an interactive selection arrow