Docs

Navs and Tabs

Posted on December 30, 2023  (Last modified on June 20, 2025) • 10 min read • 2,000 words
Component  
Component  
Share via

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

Overview   Arguments   Illustration Type   Examples   Horizontal Alignment   Vertical   Tabs   Pills   Underline   Callout   Fill and Justify  

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" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string Unique identifier of the current element.
tab-type select v1.0.0      Type of the tab group. Supported values: [tabs, pills, underline, callout].
type select v1.0.0      Use tab-type instead. Type of the tab group. Supported values: [tabs, pills, underline, callout].
vertical bool Flag to show vertical tabs instead of horizontal tabs.
word-wrap bool v1.0.0      Flag to enable word wrapping of tab titles.
wrap bool v1.0.0      Use word-wrap instead. Flag to enable word wrapping of tab titles.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id string
Unique identifier of the current element.
tab-type select
v1.0.0      Type of the tab group. Supported values: [tabs, pills, underline, callout].
type select
v1.0.0      Use tab-type instead. Type of the tab group. Supported values: [tabs, pills, underline, callout].
vertical bool
Flag to show vertical tabs instead of horizontal tabs.
word-wrap bool
v1.0.0      Flag to enable word wrapping of tab titles.
wrap bool
v1.0.0      Use word-wrap instead. Flag to enable word wrapping of tab titles.

In addition, the following arguments are passed to the individual navigation items.

Name Type Required Default Comment
fade bool Flag to make the tab pane fade in.
Name Type Required Default
fade bool
Flag to make the tab pane fade in.

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

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
disabled bool Flag to indicate the item should be in a disabled state.
fade bool Flag to make the tab pane fade in.
header string v1.0.0      Use title instead. Header of the item.
show bool Flag to indicate an item should be shown. For elements with multiple items, only one item can be shown at a time.
title string, hstring.RenderedString, hstring.HTML, template.HTML v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
disabled bool
Flag to indicate the item should be in a disabled state.
fade bool
Flag to make the tab pane fade in.
header string
v1.0.0      Use title instead. Header of the item.
show bool
Flag to indicate an item should be shown. For elements with multiple items, only one item can be shown at a time.
title string, hstring.RenderedString, hstring.HTML, template.HTML
v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Illustration Type  

Name Type Required Default Comment
anchor select Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
hook string Render hook for the element’s partial.
icon string Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string Image to include in the the content block or section heading.
image-overlay bool Trigger to include an image overlay placeholder.
mode bool Flag indicating if the media asset should support color modes. If set, the elements searches for images having a matching color-mode suffix such as -light or -dark.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
anchor select
Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
hook string
Render hook for the element’s partial.
icon string
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string
Image to include in the the content block or section heading.
image-overlay bool
Trigger to include an image overlay placeholder.
mode bool
Flag indicating if the media asset should support color modes. If set, the elements searches for images having a matching color-mode suffix such as -light or -dark.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

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 title="Nav Item #1" show="true" />}}
  {{< nav-item title="Nav Item #2" />}}
  {{< nav-item title="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Right-aligned with .justify-content-end:

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

Vertical  

Stack your navigation by setting vertical to true.

markdown 
{{< nav vertical="true" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item title="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 Markdown 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 tab-type="tabs" id="tabs-1" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item title="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 Markdown 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 tab-type="pills" id="pills-1" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item title="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 Markdown 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 tab-type="underline" id="underline-1" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #3" disabled="true" />}}
{{< /nav >}}

Callout  

Added in v0.21.0   

Take that same HTML, but using callout instead:

This is the first item’s nav body. It supports Markdown 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 tab-type="callout" id="callout-1" >}}
  {{< nav-item title="Nav Item #1" show="true" >}}
    This is the first item's nav body. It supports Markdown content. The item is shown by adding
    the value `show` to the `class` argument.
  {{< /nav-item >}}
  {{< nav-item title="Nav Item #2" >}}
    This is the second item's nav body. It too supports HTML content.
  {{< /nav-item >}}
  {{< nav-item title="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 tab-type="pills" class="nav-fill" >}}
  {{< nav-item title="Nav Item #1" show="true" />}}
  {{< nav-item title="Much longer nav item #2" />}}
  {{< nav-item title="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 tab-type="pills" class="nav-justified" >}}
  {{< nav-item title="Nav Item #1" show="true" />}}
  {{< nav-item title="Much longer nav item #2" />}}
  {{< nav-item title="Nav Item #3" disabled="true" />}}
{{< /nav >}}
On this page: