Blog list page as tabs with categories on each tab

SOLVE
Occasional Contributor

I need to create a tabbed menu for the blog listing page with each tab pulling in different blog categories.

Something similar to this: https://www.w3schools.com/howto/howto_js_tabs.asp

 

Or this image below may help as well. Are there examples online for this?

Screen Shot 2019-12-04 at 10.42.04 AM.png

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Regular Advisor

Hi @JosefinaT ,

 

I use this code to create one menu of tags in my blog HubSpot:

{% set my_topics = blog_topics('default', 250) %}
<ul>
{% for item in my_topics %}
<li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
{% endfor %}
</ul>

Look the result without CSS:

preview.PNG

 

Now, u can create the style to configure the layout you need.  Look how the code above stayed, after i configure the CSS in one template that i created:

my-blog.PNG

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

View solution in original post

2 Replies 2
Solution
Regular Advisor

Hi @JosefinaT ,

 

I use this code to create one menu of tags in my blog HubSpot:

{% set my_topics = blog_topics('default', 250) %}
<ul>
{% for item in my_topics %}
<li><a href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a></li>
{% endfor %}
</ul>

Look the result without CSS:

preview.PNG

 

Now, u can create the style to configure the layout you need.  Look how the code above stayed, after i configure the CSS in one template that i created:

my-blog.PNG

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

View solution in original post

Occasional Contributor

Thanks! That worked!