Bootstrap Navs with Shortcodes?

Hi, does someone have a elegant idee to implement Bootstrap Navs with Shortcodes.
Each Nav-Item has a Short title, long title, text and image. There will be about 4 to 5 entry’s for each Nav. If anyone has a better idea than shortcodes I would be happy to hear about it.

I am assuming that the nav element would be used in all your pages. If that is true, instead of shortcuts, the better idea would be to use base templates and blocks.
You can check out the documentation here:

I have a partial doing my navs:

To have a short and long title I would probably use frontmatter variables on the parent pages. If you want to use that on several places (between sections for instance) as a shortcode - that should be possible with the same code too.

I don’t mean Navbar’s. I want to us Nav pills on product pages. Each entry will be different for each product.

You want a nested shortcode then. Outer one creates the list, inner one creates the items. Here is an example of how to do it:

I found a working example

tabs.html

tab.html

1 Like