Setting a Dropdown Element component to "current" within a Navigation Bar component (OG)

[Stavros_A (Stavros Apostolou)]

Hello everyone,

I started using Webflow three days ago and I have made quite an impressive progress - respectively to me of course.

I am currently designing a navigation bar which includes both text links as well as dropdown menus. A screenshot showcasing the simplified design is provided below;

I am trying to setup the navigation bar’s interaction “logic” based on the current page. For the Home page that’s easy enough, it’s wrapped inside a Link Block enabling me to edit the “Current” state fairly easy.

However, that’s not the same for the Dropdown menu Invest ▼ which is a div component. Below you can see the Navigator.

▢ Navigation Component This is the navigation bar itself

▢ Navigation Dropdown Component This is the parent component for the dropdown’s links

▢ Dropdown Item Component This is essentially the List Item of the dropdown’s menu when open.

---

Now, I have thought of five unique ways this could be solved. They are as follows:

1ˢᵗ ) Wrap the Navigation Dropdown in a Link Block and edit its current state to a unique Typography Color, imitating the effect it has on a ‘standard’ Link Block.

• I tested this approach but the issue is that, because of the Link Block within the ▢ Dropdown Item component, this creates a “nested links” effect which triggers an error in Webflow as shown below;

   

2ⁿᵈ ) Create a new Class with the name Current and set its typography to the unique “active color”. Then, within the Navigation Dropdown Component set the Typography Color to auto all the way down to the Dropdown Name text element.

• The issue, of course, is that you cannot control a class’s existence in Components. If I set this class to a Navigation Dropdown (Instance) it means I am editing the entire component, changing the edited dropdown’s color across the entire website.
• I also thought about adding “Typography Color” as a Property but that’s impossible at the moment.

3ʳᵈ ) Set up a Page Load interaction where each page will have a different target. Then, use the Text Color action and set it to the active color of choice.

• The issue I came across is the fact that I cannot select a Component on Page Load interaction through the page itself. This means changing the color uniquely for ▢ Navigation Dropdown is impossible.

This is the selection of a Heading within the Home page.

This is the selection of ▢ Navigation within the Home page. Notice the absence of a purple outline indicating possible selection

4ᵗʰ ) My final idea was to create a second Dropdown Item (Instance) within the ▢ Navigation Dropdown with a Visibility Property titled “Active”, then change the text color within this Dropdown Item (Instance). I have already done this for different types of Dropdown menus as seen in the respective screenshot. (now that I think of it I could have created a Dropdown Menu component and edited it’s different styles there, but oh well).

• That’s the only option that has worked for me, however it sounds rather cheap as a workaround.

5ᵗʰ ) There is always the option of “custom code”, however, because this is a test run on a free plan, I cannot access that feature.

---

Ultimately, I am looking for other ways or corrections in general to tackle this “Active Link Component” issue for the Dropdown links.

Thank you in advance!