How to only display a few tags with the Blog Tag Nav component

Hey all! I’m loving Bootstrap Studio so far. I’m using the Blog Tag Nav component on my homepage next to a Blog Loop in order to dynamically filter my portfolio posts.

However, it shows ALL my tags, which is a bit overwhelming for the homepage.
Is there a way to pick and choose which tags I want in the Blog Tag Nav? There doesn’t seem to be one in the Options panel.

Or is there a workaround I can use to hide the unwanted Tags?

I tried using a regular Nav component to link to “?tag=2d-animation” (for example), and while that works, that method refreshes the page every time it’s clicked and scrolls the view back to the top of the page. It also doesn’t highlight the option clicked.

If I’ve understood your question correctly, the following screenshot should help.

Tag components in Blog Post Tags and Blog Tag Nav have unique tag-[slug] class names. If you select a Tag component, you can see its class in the HTML Panel or the Attributes panel.

You can add a unique class to the Blog Tag Nav on your home page (e.g. custom-tag-nav) so that the styles you add are only applied to this Tag Nav. Then use CSS to hide the irrelevant tags.

.custom-tag-nav .nav-item {
  display: none;
}

.custom-tag-nav .nav-item.tag-design, .custom-tag-nav .nav-item.tag-2d-animation {
  display: block;
}

OR

.custom-tag-nav .nav-item:not(.tag-design, .tag-2d-animation) {
  display: none;
}

Both of these will hide all tags except Design and 2D Animation.

Thank you both! Those suggestions are very helpful. I’ll try out these features! :grinning_face_with_smiling_eyes: