improve link feature

Hi BSS devs,

Is it possible to improve the way pages are linked to when users create custom page directories? And by improve i mean app will recognise when users create custom page folders and any links in a linked component (say nav bar) can recognise that you are on a different page directory and will automatically add ../ to the nav links on pages in different folders to the main root?

I just got caught out by having a few pages being linked to when pages sit in a folder which i was able to fix after having a blonde moment but has meant I've had to now de link my navbar on a few pages to be able to have different URLs that wont break my navigation.

current workaround is to split up linked components and create a new linked component with correct link structure but would be handy if some logic could be applied to handle this.

thanks

Thank you for bringing this up! This is an interesting issue. Normally when I use Bootstrap Studio I always write absolute URLs - "/" for home and "/pagename.html" for specific pages, and haven't found a need for URLs to be rewritten.

Rewriting the URLs automatically would mean that linked components have differing HTML which could cause issues. Maybe we can do this during export? Would love to hear more people's thoughts on this.

Hi Martin,

Within the app it works fine, but when I export and upload the links see breaking.

How would you handle this when you add a folder in the pages section to organise your pages a little better

For example : /foldername/pagename.html

If I link to this page from the homepage or any other page in root folder the links works. But when landing on said page if I don't do the work around i suggested the link breaks and looks somewhere else.

I'm having a tough time trying to understand what your words are saying Chris, but, if I am understanding the man gist of it, then:

Martin: It's not about pages linking incorrectly, it's about linked items using the Link feature of the app that creates the ability to change things in one part and it updates all parts linked to it automatically.

With that said, Chris is right. Similar to trying to use the "active" status of a menu where you can have the menu item highlighted depending on what page you're on. This cannot be done with linked items because any change changes it on all pages. As Chris is saying, if a page is in a subfolder of the root folder and it has the same linked section (same menu for example), the links will not be correct because the ones in a subdirectory will need the ../ in front of them to get back to the root directory.

I think (Correct me if I'm wrong here Chris), that Chris is wanting the pages to automatically adjust that part if they are put into a folder. This would be logical if you are putting an already linked page into a folder that it would adjust those links accordingly so they would still work correctly. I "think" that's what he's getting at.

yep you got it Jo.

If href urls start with a forward slash "/", browsers always interpret them as starting from your domain, regardless of which folder the current page is in. So if your header has all URLs prefixed with "/", the navigation will always work. Or maybe I am misunderstanding the exact issue you are facing.

The active state is indeed problematic. To solve this we can add make an export option like "Automatically Highlight The Active Page", and it will compare the current page URL with one of the navigation links, and mark it as active. This will only show up in the Preview and when exporting though.

Ahh I see on the forward slash, I will try that too and see if that works as intended as well.

For the Active state, that would be awesome. If that could be done for just the top level of the menu that alone would be extremely great. I have some with dropdowns that I've thought on adding that to it, but I'm not sure if it's really necessary. If it's possible to add it so it reads the second level of a menu though, I would definitely take that feature too lol. First level though is really the main part needed.

The active state is indeed problematic. To solve this we can add make an export option like “Automatically Highlight The Active Page”, and it will compare the current page URL with one of the navigation links, and mark it as active. This will only show up in the Preview and when exporting though.

I was able to set the nav item to 'active' in the options on the upper right to show that a page is a 'current page'. this method has shortcomings such as different code for each page.

Is there a way to enable the nav item to compare URL with the link as indicated in the quote above? Is there a way to do this with an ordinary link that I am including for navigation? Thank you. L.B.

You can remove the 'active' state of the Nav Item, then select the Navbar component on your page and turn on "Smart Active State" from the Options panel.