How to connect custom navbars from Webflow in Tangram

Summary:

This guide explains how to set up custom navigation bars (navbars) for different user roles (Admin, Buyer, Seller) in Tangram using Webflow.

User Role Overview

• Standard Roles: Admin, Buyer, Seller (can both buy and sell).
• P2P Marketplaces: Users can have combined roles (e.g., buyer and seller).
• Custom Roles: Possible but not covered in this guide.

Navbar Design in Webflow

1. Logged-Out Navbar:
   • Includes: Logo (links to homepage), static pages (e.g., Home, About, FAQ), and a login/register button.
   • Hamburger menu used for smaller screens.
2. Logged-In Navbar:
   • Includes:
     • Logo and static pages.
     • Dropdown for role-specific backend management links (e.g., User Tables, Transactions, Listings).
     • Logout button (best practice).
3. Customization in Webflow:
   • Ensure navbar has the Tangram attribute (TG attribute = nav bar) to integrate it into Tangram.
   • Preview designs on all screen sizes.

Connecting Navbars to Tangram

1. Replacing Default Navbars:
   • Go to the Roles Tab (under the wrench icon in the admin account).
   • For each role (e.g., Admin):
     • Navigate to Page Overrides → Navigation Source URL.
     • Paste the published Webflow URL for the role-specific navbar.
   • Repeat for all roles (Admin, Buyer, Seller).
2. Setting Correct Links:
   • Avoid using Webflow’s "Select Page" feature for links.
   • Use full URLs pointing to the Tangram domain:
     • Example: yourappname.tangram.co/home or app.yourcustomdomain.com/about.
   • Common admin routes:
     • Users Table: /platform/users
     • Transactions: /platform/transactions
     • Listings: /platform/listings
     • Logout: /logout

Role-Specific Links

• Admin:
  • Users: /platform/users
  • Transactions: /platform/transactions
  • Listings: /platform/listings
• Seller:
  • Transactions: /my_transactions
  • Listings: /listings
  • Messages: /my_chat
  • Favorites: Set up with Collections in Tangram.
  • Profile Edit: /edit_profile
  • View Profile: /my_profile
• Buyer:
  • Same as Seller for messages and profile routes.

Best Practices

• Use the Tangram domain (or custom domain) to avoid broken links.
• For advanced routes (e.g., invoices or subscriptions), refer to advanced tutorials or contact Tangram support at support@tangram.co

By following these steps, you can create a fully functional and role-specific navigation system for your marketplace.

Video Transcription:

" Hello. In this video, we'll be showing you how to connect custom navigation bars for each user role on your platform. Generally, each marketplace will have three roles, the admin role, the buyer role or customer role, and the provider or seller role. This may look a little bit different depending on your marketplace setup, as in some cases, we do have P2P marketplaces where the provider and the customer are just a single user role user that can both buy and sell, but the standard setup is having.

Sellers or providers be both buyers and sellers and then customers or buyers being just buyers. In some rarer cases, you may have even more than just these roles. But for the purpose of this demo, we'll just be using the standard admin buyer and seller roles. So to connect a custom navigation in Webflow, you'll first want to create a folder navigation.

This is just for organization purposes, putting it in the folder. And for each user role, admin, seller, buyer, we will have a logged in nav bar design. We also need to cover the case where we have logged out users, which is just a single logged out nav. By default we would include the logo on the left hand side that links to the homepage, maybe some static pages, like the home about FAQ on the right hand side here, and then a call to action button at the very right most part of the page, which would be the login or registration link on tablet.

We usually try to keep the nav bar nested underneath a hamburger menu, and we can pop open that menu and see how it look on different screen sizes like this.

And I'll quickly show you what the logged in app bar might look like on all screen sizes. Where you have the logo on the left, static pages, and then a drop down with the back end app management pages, depending on the role that you're currently logged in for. So we have some static pages like home about the marketplace search page, and then underneath admin account we have a drop down, and let me preview it so it's more visible what it would look like.

There we go. For managing the users tables and admin, the transactions, the listings across the platform and a logout button, which is just best practice in this dropdown, but you can add whatever navigation links you want up here and within the dropdown, or you could completely customize the nav bar within Webflow.

And the only thing that you would need to make sure in order for it to get pulled into Tangram is to make sure that the Tangram attribute on the nav bar component is present, which would be TG attribute equals nav bar. And lastly, to make sure that the Webflow version of the navbars get pulled into Tangram and replace the default nav across your Tangram marketplace on the subdomain of your platform, you would go to the Roles tab right here underneath the wrench icon while being logged into the admin account.

You'd choose the role that you want to replace the default nav with. So in this case, let's connect the admin nav. If we'd go to page overrides and we'd replace the navigation source URL with The URL provided in Webflow for the logged in admin nav and to get that I would go to the admin nav, which we're currently on and find the published Webflow URL copy that and that will be the.

What we paste in there. And if we paste it in there and it's published, it'll replace the nav bar from what we have within Webflow.

And we would do the same thing for each role. We would go to the page overrides tab and replace the navigation source URL with the published version of the Webflow navigation page. for that provider or for that role. Now, how do you link up the links within the nav bar to go to the correct place? It's best practice to not use the relative links or linking using this pages tab where you select a page in Webflow.

So that can break in some instances and it's best to manually paste the URL, the full URL, when connecting a link in Webflow. So if we wanted it to go to the home page, it would. We would have to direct it to the Tangram version of that homepage, meaning we don't want to link to the webflow. io or the Webflow version of the page we want.

the subdomain, whatever subdomain we're on from Tangram, whether it's yourappname. tangram. co, or if you connected a custom domain, that might look like app. yourcustomdomain.com. You would want to use that root and paste in the extension at the end, so slash home. If you had a homepage, it would look like that.

And then the about page would be like service xclone. tangram. co slash about. Or it would be your custom domain if you connected a custom domain instead of the default tangram subdomain, which would be something like app dot your domain.com/about. And these are this. This is how you would want to structure the links to link it up to function properly within Tangram.

You don't want to use this choosing a page feature within Webflow. It could break in some cases. Now, if you want to direct u users to. Specifically the admin to the admin users management table. That will be your custom domain, your custom like subdomain, or the tangram domain provided slash platform users.

The transactions one will be slash platform transactions. The listings one will be slash platform listings, and you'll want to proceed that with your subdomain. And same with logout. It'll be your subdomain slash logout. So you'd hook all of those up for the admin account. And then I quickly want to talk through.

What links you might need for the seller account in the management drop down in the paths for that for transactions It'll be the subdomain slash my transactions with an underscore between my and transactions For the listings management table for sellers or customers It'll be the same for the user level transactions table.

It'll just be my transactions for listings It'll just be slash listings with the subdomain in front of it for messages You Same for buyers and sellers, it'll be the subdomain slash my underscore chat. Favorites is a link that you'll have to create using a functionality called collections within Tangram that we'll cover in an advanced tutorial video.

Profile, if you want to edit the profile, the route will be the subdomain slash edit profile with an underscore between edit and profile. And if you want to view the profile, it would be The subdomain slash my underscore profile, and I believe that's all of the links that you would probably need for starting out in the back end.

We do have other ones in advanced tutorials that might be useful, like invoices or additional or subscriptions, additional routes like that. And you can also contact a member of our team if you have questions about how to link up any pages like that."

‍