Navs and tabs

Share via

Use the nav shortcode to show a group of multiple tab panes.

Overview

Added in v0.11.8

Use the nav shortcode to show a group of multiple tab panes. Add nav-item inner elements for each tab pane.

markdown
{{< nav id="links-1" fade="true" >}}
  {{< nav-item header="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #2" >}}
    This is the second item's nav body.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
idNoOptional identifier of the tab group, uses a generated sequence if not specified.
typeNoOptional type of the tab group, either “tabs”, “pills”, or “underline”. Uses links by default.
verticalNoOptional flag to show vertical tabs instead of horizontal tabs (default).
fadeNoOptional flag to make tab panes fade in.
classNoOptional class attribute of the tab group, e.g. “nav-fill”.

Add an inner nav-item element for each item of the tab group. The nav-item element supports the following arguments:

ArgumentRequiredDescription
headerYesRequired header of the tab pane.
classNoOptional class attribute of the inner tab pane.
showNoOptional flag to indicate an item should be shown as expanded (only one can be shown at a time).
disabledNoOptional flag to indicate an item should be in a disabled state.

Examples

Change the style of your nav with class attributes and arguments.

Horizontal alignment

By default, navs are left-aligned, but you can easily change them to center or right aligned.

Centered with .justify-content-center:

markdown
{{< nav class="justify-content-center" >}}
  {{< nav-item header="Nav Item #1" show="true" />}}
  {{< nav-item header="Nav Item #2" />}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Right-aligned with .justify-content-end:

markdown
{{< nav class="justify-content-end" >}}
  {{< nav-item header="Nav Item #1" show="true" />}}
  {{< nav-item header="Nav Item #2" />}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Vertical

Stack your navigation by setting vertical to true.

markdown
{{< nav vertical="true" >}}
  {{< nav-item header="Nav Item #1" show="true" />}}
  {{< nav-item header="Nav Item #2" />}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Tabs

Takes the basic nav from above and generates a tabbed interface by setting type to tabs. The inner content of each nav-item is rendered within a linked tab pane. The content supports embedded HTML.

This is the first item’s nav body. It supports HTML content. The item is shown by adding the value show to the class argument.
This is the second item’s nav body. It too supports HTML content.
markdown
{{< nav type="tabs" id="tabs-1" >}}
  {{< nav-item header="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Pills

Take that same HTML, but using pills instead:

This is the first item’s nav body. It supports HTML content. The item is shown by adding the value show to the class argument.
This is the second item’s nav body. It too supports HTML content.
markdown
{{< nav type="pills" id="pills-1" >}}
  {{< nav-item header="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Underline

Take that same HTML, but using underline instead:

This is the first item’s nav body. It supports HTML content. The item is shown by adding the value show to the class argument.
This is the second item’s nav body. It too supports HTML content.
markdown
{{< nav type="underline" id="underline-1" >}}
  {{< nav-item header="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports HTML content. The item is shown by adding the value
    <code>show</code> to the <code>class</code> argument.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Fill and justify

To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

markdown
{{< nav type="pills" class="nav-fill" >}}
  {{< nav-item header="Nav Item #1" show="true" />}}
  {{< nav-item header="Much longer nav item #2" />}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

markdown
{{< nav type="pills" class="nav-justified" >}}
  {{< nav-item header="Nav Item #1" show="true" />}}
  {{< nav-item header="Much longer nav item #2" />}}
  {{< nav-item header="Nav Item #3" disabled="true" />}}
{{< /nav >}}
Last updated: June 29, 2023 • Rename base docs folder from 0.9 to latest (8a90ed7)
On this page