Conditional Dropdown Menu Items: Is it possible?

Design help General
1

Yes, everything is possible with custom code. However, I’m attempting to create a simple design system where some dropdown items are visible when the user is signed-in.

Conceptually, the idea is to trigger conditional visibility of an element based on a “variable” that would be dynamically populated in a subsequent development phase. For now, I would like to build out my site with some navigation dropdown elements hidden based on this “variable” value set to false. Later on when we develop registration and sign-in functionality, the UX would already be available to expose dynamically when this “variable” is true.

I’m loosely using the term “variable” because I’m not referring to Webflow Variables but rather a hidden parameter that will be hard coded to “false” now and incorporated to be dynamic later.

I’ve created the top navigation bar as a component with each dropdown menu item defined as a separate Link Block. For example, the “Registration Link Block” would have its visibility disabled when the user is signed-in. So too, the “Sign-Out Link Block” would not be visible when no user is signed-in.

I’ve seen tutorials on how to tie visibility to an element in the CMS, such as only having an element show when on a specific page. However, this visibility is tied to the state of the user and not something that is page or content specific. It is a variable that will persist across all pages on the site.

Otherwise I think I have to use Webflow’s user management and incorporate synching user records with my core system ($). Not a horrible solution but I was hoping for something more simple.

I don’t want to get too advanced in crafting a solution here as there will be far better developers engaging once we launch. For now, just looking for any insights on how to create dynamic visibility that can serve its purpose now (e.g. hide all of the dropdown link blocks for signed-in users) and possibly be utilized by the future dev team.

It isn’t imperative that the future development team can actually use this solutions “as is.” I find it useful to show developers how it is supposed to work and then let them recreate the solution.

Let me now if you have any suggestions.

2

hi @digitaldarwin it is straight forward process once you will have isUserLoggedIn to be true or false you can do anything you need.

simple example will looks like this

<script>
  // Simulate the user sign-in state
  var isUserLoggedIn = false; // Set to true or false manually for testing

  // Wait for the DOM to load
  document.addEventListener("DOMContentLoaded", function() {
    // Get elements by their IDs
    var signInLink = document.getElementById("sign-in");
    var registerLink = document.getElementById("register");
    var signOutLink = document.getElementById("sign-out");

    // Control visibility based on the sign-in state
    if (isUserLoggedIn) {
      // User is signed in: show 'sign-out', hide 'sign-in' and 'register'
      signOutLink.style.display = 'block';
      signInLink.style.display = 'none';
      registerLink.style.display = 'none';
    } else {
      // User is not signed in: show 'sign-in' and 'register', hide 'sign-out'
      signOutLink.style.display = 'none';
      signInLink.style.display = 'block';
      registerLink.style.display = 'block';
    }
  });
</script>

If conditionally visible links are inside dropdown that contain permanently visible links you can for example set attribute like “isVisible” on conditional links and based on isUserSignedIn change false to true toggle their visibility . :man_shrugging:

Please refer to this response how to get logged user info:

3

If you’re using User accounts, and you just want conditional vis based on login state, Webflow already supports that. Just check the settings panel of any component on the page, and set the visibility according to the login state.