Community forum for knowledge and support

Updated last year

Editing the Navbar in Relume and Figma

At a glance

The community member is new to Relume and Figma, and has created a sitemap and wireframes in Relume, which they have integrated with global styles in Figma. They are trying to add more items to the navbar, which currently has 4 items, and they need it to have 6-7 items. Another community member responds that in Webflow or Figma, the existing navbar items can be duplicated to create more, but the Relume Site Builder currently does not have the functionality to change the number of navbar items. The community member is advised to export from the Site Builder into Webflow or Figma to add the final customization. Another community member provides a step-by-step guide on how to detach the navbar instance in Figma, create a new page for site components, and then create a new Figma component from the detached navbar, which can then be duplicated across multiple screens.

Useful resources

Hi all, I'm new to relume and figma. I've created a sitemap and I've got wireframes in relume, and I've got that working with global styles in figma. I'm trying to add more items to the navbar (it currently has 4 and I need it to have 6-7) - where do I edit/add these as I've spent a few hours in both relume and figma, going through various videos but cant find out how?! Help πŸ™‚

S
D
M
4 comments

Hi Dave, in webflow or figma you can duplicate the existing navbar items to create more.

Inside the Relume Site Builder, there is no functionality to change the number of navbar items yet. We value your feedback and are looking into these type of features soon πŸ™‚

So for now, I'd recommend exporting from Site Builder into Webflow / Figma to add the final customization. Let me know if that works for you!

you'll want to navigate to the Navbar / 1 / layer on the left side panel and then right click and "detach instance".

What I do once I have it detached, is I will actually bring this into a new page that I've created called "Site Components" and this is where I will create Figma global components like navbars, footers, CTAs, etc.

So if you choose to do the same, you could just copy it to a new page, and then create a new figma component from that.

Once you've made it a "local" component, and you've duplicated that component across many screens, any changes you make will be displayed across those instances. Hope that makes a little sense. At the very least, detaching the instance will allow you to edit it the way you want to.

Hey Matt, thanks for that. Works perfectly πŸ™‚

Add a reply
Sign up and join the conversation on Slack