Bulma offers tabs component as another form of navigation. This page has tabs at the top as an example.
The tabs gets its content from a data file in your site’s
_data directory. Simply set the name of your data file in the page’s menubar setting in the frontmatter.
title: Page with tabs
subtitle: Demo page with tabs
Tabs can be used in conjunction with menubar and/or sidebar if you wish.
Creating a tabs data file
Create a data file in the _data directory and use the following format (if using yml)
- name: Tabs
- name: Sidebar
- name: No Sidebar
- name: Menubar
You can control the alignment, style and size of the tabs by using the relevant Bulma tabs classes.
Active Tab Highlighting
It will automatically mark the active tab based on the current page.
You can add icons to your tab by passing in the Font Awesome icon class.
If you don’t wish to show icons then simply omit the option from your yaml file.