Forum Academy Marketplace Showcase Pricing Features

PIUIUX Navigation Bar - New Plugin by Andrea Purracchio

PIUIUX Navigation Bar

A beautiful, modern and fully customizable navigation bar that you can’t simply make using basic Bubble elements.

  • Respects good practice to build a menu by use of Things or Options (new feature), so (for example) you can show or hide items by conditions;

  • You can add URLs in HREF attribute for SEO optimization;

  • A very impressive preview in editor (perfectly similar to live component);

  • Width of link’s button is proportioned with length of text;

  • You can change the align and distribution of items in the navigation bar;

  • Every parts color are modifiable for every states (default, focus, hover, active);

  • There’s the wished ANIMATED SLIDING MARKER that you can customize like you never seen before !

Please, don’t waste time to make navigation bar from scratch!

Take a look:

5 Likes

Impressive.

1 Like

Released version 1.2.X

Navigation bar now with icons !!!
You can add icons and set inline (on left) or on top of labels. Labels can be hided to show only icons.
https://2a7c93542693149360b49e2e8924dc26.bubbleapps.io/navigation_bar

Hey there,

I attempted to use this navigation bar for the submenu feature. When I look at the demo builder app you linked to, yours has different options than mine and I cant figure out how to match your settings.

See this video: https://www.loom.com/share/784b49f474204e75a4c9e475e6f18b46

Hope to hear from you soon.

Benjamin

1 Like

What I’m getting is that this isn’t possible to have in a reusable element with the sub menu?

Hi @ben4,
I’m sorry but there’s not a “submenu feature” in my plugin.

The video that you show me is about the “button feature” of navigation bar. Every item can be used like a button to trigger a workflow. In my example page I open a Group with an animation and 3 buttons inside (you can explore how I made it: see Workflow tab in editor).

About different fields to input item’s data, you are right: my sample page is based on a previous release of plugin (before 2.9.3) and for correct some issues I decide (joined with other customers) to change data input method.

Item’s data input method is for set Labels, Icons and Urls in each nav items and are not for some “submenu” feature.

In fact, with latest release you can manage Labels, Icons and Urls separately for each nav items. You can get data from DB or Options separately (for instance, you can made complex structure to manage language localization …or what you want).

I hope I helped you.

About making submenu, with my plugin Navigation Bar’s item used like a button, you can do whatever you can do with Bubble elements: Reusable Elements also …I think.
Try it and let me know.

Hey,

Sorry but no that didnt help. please see this loom : https://www.loom.com/share/4e549e13f176432391aa0ba84ac2b203

Benjamin

OK Benjamin @ben4 ,
I didn’t remember well.
Set Group W invisible at load and its conditional formatting to get visiblewhen NavBar is on proper value, by button click.
See below.


…and


You can use Workflow also using “Do when condition is true” action.

Values of NavBar can be inherited from hosting Group and then from hosting Repeating Group.

Let me know if you want some help.

The plugin looks great in theory - but there are no instructions on how to use it to achieve the results you’ve shown in your demo. Most of us are new to space - and just saying look at the Editor isn’t helpful. How do we set this up - please can you provide some more detailed instructions, or best of all a video on how you’ve built those demo elements?

Hi @rich2,
you are right, however in try over and over again you can find more practice and then achieving more experience.

I try, soon as possible, to create a video tutorial. See you soon.

I think the editor version and the live version are different, and the test (editor) version doesn’t show how the icons are defined.

Or am I missing something basic?

How do you specify the icons?