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 layout: page show_sidebar: false menubar: example_menu tabs: example_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)
alignment: is-left style: is-boxed size: is-large items: - name: Tabs link: /page-4/ icon: fa-smile-wink - name: Sidebar link: /page-1/ icon: fa-square - name: No Sidebar link: /page-2/ icon: fa-ellipsis-v - name: Menubar link: /page-3/ icon: fa-bars
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.