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.

2020-05-30 18.03.55

  • 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:
https://2a7c93542693149360b49e2e8924dc26.bubbleapps.io/navigation_bar

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?

@studio.purracchio I had to unsubscribe from this plugin because there is no documentation anywhere to show how to get icon images to load. If you could fix that I would happily use this plugin. I tried everything and could never figure out that part.

Dear @jarett1
You are completely right!!!
I’m very sorry for that, but I haven’t updated plugin’s test page for over a year.

However. I’ve just update the presentation/test page
https://2a7c93542693149360b49e2e8924dc26.bubbleapps.io/navigation_bar
where you can see the next steps to add icons …

  1. Create an option and name it like “Navigation” or “Menu” or what you want…with almost three text parameters:
    “Label” (you can use Display of option), “Icon” and “Url”

  2. Valorize the parameters above with proper values and you can add a SVG directly in Icon parameter.
    Why SVG !? …more speed (the server don’t need to interrogate Google’s datas to display them) and more flexibility: you can download tons and tons of icons from the web.
    Where I get SVG icons !? …
    OK …
    Google Fonts
    https://materialdesignicons.com/
    https://www.flaticon.com/
    … or where you want (or you can create one from scratch)

That’s the good practice, however you can do that in more differents ways.

Take a look at test page above and ask me if have doubts!
Bye.

@lindsay_knowcode

Hello Andrea,

Even though I reproduced what you did in your demo, I have two issues :

  • The first item of a list of four is not displayed
  • None of the icons are displayed. Some weird number is displayed instead.

What could be the issue ?

image
image

Thank you.

@studio.purracchio is it a bug with your plugin or am I doing something wrong ? Even though I reproduced everything you did in your demo.

Hi @gary.abouaf ,
show me what inside your Options values: the value of “HOME” option for icon, label and url and so I can see the problem. Thanks.

There is not a bug. Take a look below…
Screenshot 2022-02-07 at 11.55.27

Here’s the value for HOME :

OK. The problem is the SVG code. There are some spaces or tabulations that invalidate code.
Download SVG icon code as is, without modification, or minify code by an online SVG minifier.
Try and let me know. Bye.