Tabs

Tabs Component

Bulma offers tabs component as another form of navigation. This page has tabs at the top as an example.

Displaying tabs

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

Settings

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.

Icons

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.