Navs and tabs

Share via

Link copied to clipboard

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

Overview

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

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.

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 Markdown content. The item is shown by adding
    the value `show` to the `class` 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:

Argument	Required	Description
id	No	Optional identifier of the tab group, uses a generated sequence if not specified.
type	No	Optional type of the tab group, either “tabs”, “pills”, “underline”, or “callout”. Uses links by default.
vertical	No	Optional flag to show vertical tabs instead of horizontal tabs (default).
fade	No	Optional flag to make tab panes fade in.
class	No	Optional 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:

Argument	Required	Description
header	Yes	Required header of the tab pane.
class	No	Optional class attribute of the inner tab pane.
show	No	Optional flag to indicate an item should be shown as expanded (only one can be shown at a time).
disabled	No	Optional 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.

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 vertical="true" >}}
  {{< nav-item header="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 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 >}}

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 type="tabs" id="tabs-1" >}}
  {{< nav-item header="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 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 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 type="pills" id="pills-1" >}}
  {{< nav-item header="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 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 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 type="underline" id="underline-1" >}}
  {{< nav-item header="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 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 >}}

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.

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 type="callout" id="callout-1" >}}
  {{< nav-item header="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 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: November 5, 2023 • Update to Hinode v0.21.0 (1c81288)

On this page

Docs

Overview

Arguments

Examples

Horizontal alignment

Vertical

Tabs

Pills

Underline

Callout

Nav Item #1

Nav Item #2

Nav Item #3

Fill and justify