Hugo Dynamic Tabs

Hugo Dynamic Tabs is a Hugo theme component that adds tabbed content sections to markdown files through two shortcodes, with no hardcoded limit on the number of tab groups or tabs per group. It runs on the Hugo static site generator and was created by Richard Van Horn, with development spanning 2019 through 2022.

What is Hugo Dynamic Tabs?

Hugo Dynamic Tabs is a theme component that installs into a Hugo site's themes folder and supplies two shortcodes: tabs (the parent wrapper) and tab (a nested child). Each tab shortcode equals one tab, and the tabs shortcode uses a tabTotal variable to generate the tab navigation. The component accepts markdown as tab content and outputs Bootstrap-based tab groups, so no front-matter or JavaScript configuration is required beyond the shortcode variables.

Key Features

• No hardcoded limits — Create any number of tab groups per page and any number of tabs per group; the only constraint is that tabTotal must equal the count of nested tab shortcodes.
• Bootstrap 4 and Bootstrap 5 support — The master branch targets Bootstrap 4, while a separate bootstrap5 branch provides a version built for Bootstrap 5; both are explicitly maintained in the repository.
• Right-aligned tabs — The optional tabRightAlign variable takes a number, and every tab from that position onward is right-aligned within the navigation (for example, setting it to 2 right-aligns tabs 2 and 3).
• Automatic tab IDs — Each tab receives a randomly generated six-letter ID (26^6 = 308,915,776 possible combinations), so multiple tab groups on the same page do not conflict; the old tabID variable was removed in version 2.00.
• Theme component installation — Install with one git clone into themes/hugo-dynamic-tabs and add hugo-dynamic-tabs to the theme list in config.yaml or config.toml, before the main theme.
• Markdown in tab content — Tab bodies are written in standard markdown between the opening and closing tab shortcode tags, so formatting and code blocks work inside tabs.
• Fits custom frameworks — The tabs.html and tab.html shortcode files can be edited to work with any CSS framework or custom styles, as explained in the documentation.

Who is it for?

• Hugo site developers who want to add tabbed sections to documentation, product pages, or tutorials without building their own shortcodes from scratch.
• Documentation maintainers who need to present API references, setup instructions, or multi-option examples in a compact tab layout within markdown.
• Theme developers who want a reusable, configurable tab component that can be adapted from Bootstrap to their own design system by editing two shortcode templates.

What can you do with Hugo Dynamic Tabs?

• Organize content into tabs — Wrap related sections in tabs and tab shortcodes so readers can switch between views without leaving the page.
• Right-align selected tabs — Use tabRightAlign to place important tabs (like a "Contact" or "Advanced" tab) at the right edge of the tab bar.
• Run multiple independent tab groups — Because each tab gets a unique six-letter ID, a single page can contain several tab groups that operate independently without cross-triggering.
• Swap the styling framework — The shortcode templates are plain HTML with Bootstrap classes, so you can replace those classes with any framework's tab classes or your own CSS.

How does Hugo Dynamic Tabs work?

Install the component as a theme or copy the two shortcode files into your layouts/shortcodes folder. Then, in any markdown file, add a tabs shortcode with a tabTotal variable, nest tab shortcodes inside it each with a tabName, and place markdown content between the opening and closing tab tags. Hugo renders the group as a navigation bar with the tab content below it, using Bootstrap's tab behavior.

FAQ

Do I need Bootstrap to use Hugo Dynamic Tabs?

The default shortcode templates use Bootstrap 4 classes, and a separate bootstrap5 branch exists for Bootstrap 5. If your site does not use Bootstrap, you will need to edit tabs.html and tab.html to match your framework or custom CSS; the documentation includes guidance on what to change.

Why are my tabs not displaying properly?

The most common cause is a mismatch between the tabTotal variable in the tabs shortcode and the actual number of nested tab shortcodes. Make sure tabTotal equals that count and that every tab shortcode has a tabName.

Can I use more than one tab group on the same page?

Yes. Each tab is assigned a randomly generated six-letter ID, allowing up to 308,915,776 unique combinations per build. If an accidental duplicate occurs, rebuilding regenerates new IDs for all tabs.

Why do all my tab groups change when I click one tab?

This happens when tab IDs are duplicated, usually in a stale build. Rebuild the site so Hugo generates a new six-letter ID for every tab, which eliminates the shared-state conflict.

How can I use Hugo Dynamic Tabs with Bootstrap 5?

Use the bootstrap5 branch from the repository instead of the master branch. The master branch is built with Bootstrap 4, so using it with Bootstrap 5 will require manual class changes.