Navs and tabs
Use the nav shortcode to show a group of multiple tab panes.
Use the nav shortcode to show a group of multiple tab panes. Add nav-item inner elements for each tab pane.
show to the class argument.
{{< 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 >}}The shortcode supports the following arguments:
| Name | Type | Required | 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. |
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. |
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 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. |
Change the style of your nav with class attributes and arguments.
By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with .justify-content-center:
{{< 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:
{{< 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 >}}Stack your navigation by setting vertical to true.
{{< 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 >}}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.
{{< 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 >}}Take that same HTML, but using pills instead:
{{< 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 >}}Take that same HTML, but using underline instead:
{{< 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 >}}Take that same HTML, but using callout instead:
show to the class argument.{{< 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 >}}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.
{{< 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.
{{< 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 >}}