Community forum for knowledge and support

Updated last year

Best Practices for Combining Topbar and Navbar in Web Application Development

At a glance

Hey guys, I want to develop my first web application with wized and xano soon and I am wondering what is best practice for the navigation. For example, how would I correctly combine Topbar 1 and Navbar 7 so that Navbar 7 is displayed first and Topbar 1 as soon as I am logged in? Would appreciate any tips :)

M
D
4 comments

are you saying that navbar 7 would be the logged out version and would essentially be your marketing site? My advice, depending on the scale of your application would be to potentially have two different webflow projects - one for the marketing site and one for the app.

If the scale of the application will be relatively small, then I would say that you'd want to still keep these two things pretty separate.

However, technically, you could do what you are saying just fine - I just think maintaining something like that might get difficult at some point.

If you did a single webflow project, maybe you can have a folder called /app/ and inside of there maybe its /app/dashboard and /app/login /app/signup, etc. So Basically all of your app pages would live under the /app folder in Webflow. So you'd want to maintain separate components as well. I would do something like [App] Navbar and [App] Footer.

Just my two cents on it.

As far as how you would technically go about implementing what you are saying, I would highly encourage you to watch and clone all of their projects and just build those projects along with Emanuel to learn all the basics of Wized. Even if the app they are building isn't the one you are building, the concepts all apply the same.

Thank you for the detailed answer ! I was more likely thinking about a page that shows the same content whether you're logged in or logged out. Just the navigation changes. I should have made that clear before, sorry! I attached two screenshots from sixt.com; they have exactly the navigation behavior I want to achieve.

I will definitely watch all of Emanuel's Project Tutorials! 🙂 I have already skimmed through the tutorials, but the ones I saw only explained the behavior you mentioned with a separate dashboard (/app/dashboard). I will surely need this for the user accounts and bookings, but what I’m wondering about is how to handle the navbar.

Hope you can follow me since English isn’t my first language, and thank you very much for your time! I appreciate it.

yeah, no worries - Emmanuel definitely goes through how you can show/hide content based on whether or not a user is logged in or out. It would be the same principles applied to those elements as it is applied to the navbars.

In your example, I see only some elements of the navbar being swapped out - which again is just about having certain attributes on those elements and using Wized to check the API for if they are logged in - show these elements and hide those elements - if they are logged out, reverse it.

Thanks, guess i was thinking too complicated about it. I will watch the tutorials and figure it out!

Add a reply
Sign up and join the conversation on Slack