Tabbed Content Bric in Blocs 6 [TUTORIAL]

Tips and Tricks
1

Hey guys,

With Blocs 6, we have an abundance of new possibilities to create incredibly sophisticated dynamic layouts with features like Custom Interactions, CSS transforms, and more, but I believe some users might still underestimate the utility of Tabbed Content Bric. I’ve created a video about it before, but I think with all drama around Tab Anything Pro bric, it’s a good moment to revisit the topic with the introduction of Blocs 6.

Classes showed in the video:
.nav-tabs
.nav-tabs .nav-link
.nav-tabs .nav-link.active

Project file showed in the video:
Tabbed Content Bric in Blocs 6.bloc (132.7 KB)

Cheers,
Eldar

18 Likes
2

Thank you for creating this Eldar…

Rich the Weather Guy

3 Likes
3

Immensely generous offering and effort @Eldar , surely this will help many, well done.

4 Likes
4

Here our friend, Eldar is exhausted and he still takes the time to make this for us!! Thank you so much. :smiley:

3 Likes
5

Wonderful Eldar :pray:t4:

3 Likes
6

Awesome! We are lucky to have you as part of the Blocs community @Eldar.

Thank you :raised_hands:

7 Likes
7

Brilliant video. Thanks for your efforts

3 Likes
8

Thanks for taking the time to make this video @Eldar

5 Likes
9

You can also easily turn the tabs into a dropdown on smaller breakpoints like on Rich’s site. This is with Blocs 5 no problem, which will be a better mobile experience. I mocked up a quick example.

But this is just a proof of concept. Nice tutorial Eldar.

6 Likes
10

Yeah, for sure. Multiple ways to address mobile version, especially with Blocs 6. Thanks

1 Like
11

Cool, look forward to maybe a tutorial in 6 showing some new ways to do this.

:grinning:

12

You are still on Blocs 5?

13

Yes. Still on Blocs 5.

I had to pay for other things over Black Friday, such as my Pinegrow license etc. Having been out of action most of the year with surgeries etc, I had to be more careful what I spent and had other priorities.

2 Likes
14

Hopefully everything went well and you are healthy now

6 Likes
15

Hope all is well Pete.

16

Pete, that would work quite well!!!

Rich the Weather Guy

1 Like
17

Well I’m not dead yet. So that’s good :joy:

Thanks for asking. :grin:

4 Likes
18

Excellent.
What did you do to make the navigation close after you click on a map?

19

Another useful example. Thanks for sharing :raised_hands:

1 Like
20

Hi @Bootsie thats a drop down.

Having a bunch of stacked tabs above your content isn’t very user friendly for mobile users who will have to scroll to see the selected content. Which is why Tab Anything does it that way, I replicated it with a tabbed bric and a drop-down. Solutions have to be practical right? Apparently there are many ways to do this in 6. I guess we will wait for the demo of that. Although my method made in 5 will work in 6 also.