I’m trying to replicate the functionality I currently have on my home page at
There’s a list of items of expertise on the left, and selecting one of them changes the content of the “pagelet” on the right, allowing visitors to get an overview without having to scroll through a big long page like so many sites or change pages with the main site nav menu.
This was absolutely trivial to do with SandVox, in which the site was created, but I’m stumped on how to do it in Blocs. I can get the text to change by using a Custom Interaction (although having multiple paragraphs of text live in the Interaction Manager’s tiny text box is not ideal) but there’s no way to change an image with Interactions as far as I can see.
I’ve never needed to build something in this manner, but my guess is the following would probably work:
Bloc » Row » Two Columns
First column is your sidebar navbar
Second column is your content
…but this then will introduce a couple of issues. You can’t very well make this a global header as the content will change for every page. So I guess you could save the sidebar as a Bric and reuse it across pages but this might be quite a hassle.
But the other problem you’re likely to have with this setup is at smaller sizes such as mobile, the sidebar likely won’t work space-wise and you’ll need to switch to a hamburger menu so that folks can see the content.
Alternatively, it looks like there’s two “easy buttons” here…
@Eldar has solved these problems with the Sidebar Template and does indeed have a static sidebar at larger breakpoints.
Blocs Premium has a SideBar Nav extension that appears to do something similar but I can’t tell if you can keep the sidebar always visible at larger breakpoints.
I’m sure others will have some additional ideas here.
Thanks, Patrick. The issue is not in making a sidebar list, but in making it change the content of an image Bric on the right when a list item is clicked. As I write this I realize I could just duplicate the entire page for each list item and have the list items go to those URLs - clunky but should work.
[edit]
That works but is suboptimal in that elements with a Custom Interaction linking them to another page don’t behave like links in a browser - the cursor remains a text cursor and the link doesn’t highlight. Unacceptable UI. I find it kinda crazy that Blocs doesn’t just have a popup in the inspector for linking - you have to create a Custom Interaction just to make a link and then it doesn’t behave like a link
Well I can say that Eldar solved this issue by using the standard Blocs NavBar item and some classes. It’s not very straightforward but definitely doable.
But it looks like there might be another third-party solution here as well:
@PeteSharp‘s Offcanvas Helper 2 appears to create sidebar navigation. Not sure if you can keep the sidebar always visible at larger breakpoints though.
Also on a side note, I sort of implied this, but didn’t explicitly explain things. I get the sense that you’re trying to create a single page and have it be dynamic based upon the sidebar selection. Although I’m sure this is possible in one form or another, this really isn’t the paradigm for Blocs.
Instead of making things dynamic, things should instead be more static with each link in the sidebar being its own page in Blocs. When you click a link in the sidebar, then that respective page gets loaded. This is precisely why I was saying that the sidebar might be a pain as you’ll have something “static” that is duplicated across multiple pages with no easy way of updating things in a single spot. This is where the NavBar and globals areas come into play for Blocs as this solves this problem.
I’m leaning toward using a “Features” Bloc, either on the home page or on an “Expertise” page, with each “More Info” button linking to a dedicated page for that area of expertise. That way I won’t have to fight with the “Blocs paradigm”
The issue with using Custom Interactions for this is that it doesn’t natively handle the state change for multiple element types like images and text simultaneously. If you use the Tabbed Content bric, it generates the proper Bootstrap tab structure under the hood. I’ve found that it’s much more stable for SEO too since all the content is in the DOM on page load rather than being injected via a small interaction script. You can style the sidebar list to match your original site pretty easily with some custom classes.
This is exactly what I was looking for but was unable to describe properly, thank you. I’ll probably go this route so the visitor doesn’t have to keep going back to the “Expertise” page after viewing the details of a category.
