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:

Name	Type	Default	Comment
class	string		Class attribute of the tab group, e.g. `nav-fill`.
id	string		Identifier of the tab group, uses a generated sequence if not specified.
type	select		Type of the tab group. Supported values: [tabs, pills, underline, callout].
vertical	bool	false	Flag to show vertical tabs instead of horizontal tabs.
wrap	bool	false	Flag to enable word wrapping of tab titles.

Name	Type	Default
class	string
Class attribute of the tab group, e.g. `nav-fill`.
id	string
Identifier of the tab group, uses a generated sequence if not specified.
type	select
Type of the tab group. Supported values: [tabs, pills, underline, callout].
vertical	bool	false
Flag to show vertical tabs instead of horizontal tabs.
wrap	bool	false
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	Comment
class	string		Class attribute of the item.
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	yes	Header of the item.
show	bool		Flag to indicate if the item should be shown. Only one can be shown at a time.

Name	Type	Required
class	string
Class attribute of the item.
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	yes
Header of the item.
show	bool
Flag to indicate if the item should be shown. Only one can be shown at a time.

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 >}}

• Update to Hinode v0.27.13 (b6f5054)

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