Headers and Footers?

Is it possible to have a header and/or footer across all pages which would hold navigation and other commonly standard items across an app?

thanks,

Larry

Yes. That’s what reusable elements are for.

2 Likes

Thanks, just tested and reusable elements will totally work for my needs.

1 Like

But how do we have different headers and footers depending if people are logged in or not? I know I can have Header A and Header B, but there are some pages that I want accessible from both states: Logged in and Not Logged in.

So I suppose I need a state that chooses a header depending on whether the user is logged in or not. Is that possible? It seems obvious that the answer is YES. But how???

Within the same reusable element, show/hide a group that is conditionally shown based on if the user is logged in.

2 Likes

Is it possible to show/hide elements within the reuseable header based on what page/URL the user is on?

Yes, you can use the data source Current Page Name and apply a condition on the element based on this.

3 Likes

thanks! When using the Current Page Name, I’d like to link it to refer to a page name, instead of hardcoding the page name in. Is this possible? Obviously, would like to avoid hardcoding it so that stuff doesn’t break if I ever decide to change page names…

No at this point you need to hardcode the page name.

1 Like

I just wrestled with Bubble to try and do the same thing @dan2gold tried to do.

@emmanuel Do you guys plan on adding this in the future?

Being able to check “This 's URL is Current Page URL” or “This 's Link’s Page Name is Current Page Name” or something.

I realize that it might not be that easy to implement, because the URL of the element is usually defined in a workflow. Unless you use the “link” feature, I suppose. At the moment it’s just not possible though.

I’d like to hear your thoughts on this :slight_smile:

Regards,
Olrik

What are you trying to do? Not sure I follow.

I want to use the current page’s name or URL to check whether or not a certain page is active, and then conditionally format the element in such a way that makes it clear to the user they are on that page. As such:

Right now, the elements are hard coded to look at the “Current Page Name”, but I need to add this on every element of my header manually. There is no way to use dynamic content to check for this at this time, and as such, when the pages change, I need to go back to my header and change all the elements that broke.

If I were to be able to reference the element’s link or URL I could use that to check if the current URL is the same as where the element links to, to format it into the white or light pink color.

Regards,
Olrik

That may be a little tricky as page names can be dynamic.

What about using contains?

Something like: “This [element]'s URL/Destination contains This URL”

Even if it is dynamic, it should still have the first part of the URL in it, right?

Regards,
Olrik

when you say “hardcode the page name” does that mean the actual url or the name of the page. When I try to do Current Page Name is “index” it doesn’t work for me.