Docs
Navbar
Last modified on June 20, 2025 • 7 min read • 1,473 wordsOverview
Use the navbar shortcode to display a navigation header with a toggler. The menu items are derived from the site’s configuration, which defaults to the menus defined under main. Nested items are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable. The items in the navigation header are accentuated if the current page or any of its descendants is active. As an example, the following shortcode displays a navigation header with a body color.
{{< navbar id="navbar-overview" path="credits" color="body" breakpoint="md" search="false" menus="sample" title="Brand" mode="false" >}}Arguments
The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| breakpoint | select | md |
v1.0.0
Breakpoint of the element. Supported values: [xs, sm, md, lg, xl]. |
|
| class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
| color | select | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
||
| id | string | Identification of the navbar, defaults to navbar-0. The id is used by several child elements, including a color mode switcher, version switcher, and collapse panel. |
||
| logo | path | Address of the logo image, defaults to the parameter logo set in the main section of the site’s parameter configuration. |
||
| logo-align | select | center |
v1.15.0
Alignment of the logo when the navbar is in collapsed mode. Supported values: [start, center]. |
|
| logo-mode | bool |
v1.15.0
Flag indicating if the logo should support color modes. If set, the navbar searches for images having a matching color-mode suffix such as -light or -dark. |
||
| menus | string | main |
Name of the menu configuration. | |
| mode | bool | true |
Flag to include a color mode switcher, defaults to true when dark mode is enabled. |
|
| path | path | Path of the page that the element references. | ||
| search | bool | true |
Flag to include a search input. | |
| size | select | md |
v1.0.0
Use breakpoint instead. Breakpoint of the navbar toggler. Supported values: [xs, sm, md, lg, xl]. |
|
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | ||
| transparent | bool | v1.19.0 Flag indicating the navbar should be transparent. When set, the navbar uses the current section’s background color and applies a semi- transparent blur filter. The site’s body color is used as fallback. If set, the color mode of the current section is used too. When no mode is set, the navbar applies a mode with the best contrast. |
| Name | Type | Required | Default |
|---|---|---|---|
| breakpoint | select | md |
|
v1.0.0
Breakpoint of the element. Supported values: [xs, sm, md, lg, xl]. |
|||
| class | string | ||
| Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
| color | select | ||
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
|||
| id | string | ||
Identification of the navbar, defaults to navbar-0. The id is used by several child elements, including a color mode switcher, version switcher, and collapse panel. |
|||
| logo | path | ||
Address of the logo image, defaults to the parameter logo set in the main section of the site’s parameter configuration. |
|||
| logo-align | select | center |
|
v1.15.0
Alignment of the logo when the navbar is in collapsed mode. Supported values: [start, center]. |
|||
| logo-mode | bool | ||
v1.15.0
Flag indicating if the logo should support color modes. If set, the navbar searches for images having a matching color-mode suffix such as -light or -dark. |
|||
| menus | string | main |
|
| Name of the menu configuration. | |||
| mode | bool | true |
|
Flag to include a color mode switcher, defaults to true when dark mode is enabled. |
|||
| path | path | ||
| Path of the page that the element references. | |||
| search | bool | true |
|
| Flag to include a search input. | |||
| size | select | md |
|
v1.0.0
Use breakpoint instead. Breakpoint of the navbar toggler. Supported values: [xs, sm, md, lg, xl]. |
|||
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | ||
| Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | |||
| transparent | bool | ||
| v1.19.0 Flag indicating the navbar should be transparent. When set, the navbar uses the current section’s background color and applies a semi- transparent blur filter. The site’s body color is used as fallback. If set, the color mode of the current section is used too. When no mode is set, the navbar applies a mode with the best contrast. | |||
Examples
Change the style of your navbar with shortcode arguments.
Brand Text and Logo
Set the argument logo to an image to add a brand logo to the left of the navbar. The logo moves to the center on smaller screens, pending on the size setting.
{{< navbar id="navbar-logo" logo="/img/logo_icon.svg" path="credits" color="body" breakpoint="md" search="false" menus="sample" mode="false" >}}Set the argument title to add a brand text to the left of the navbar. The text moves to the center on smaller screens, pending on the size setting.
{{< navbar id="navbar-title" title="Brand" path="credits" color="body" breakpoint="md" search="false" menus="sample" mode="false" >}}Colored Navbar
Important
To improve color-mode compatibility, the colors
darkandlightare no longer supported since v0.14.1 . Use the adaptive colorsbodyandbody-tertiaryinstead, or apply a staticwhiteorblackcolor. The background colorswhiteandblackusedata-bs-themeto fix the text color. This setting requires Dark Mode to be enabled.
Set the color argument to define the background color with a matching title color.
{{< navbar id="navbar-color-1" path="credits" color="primary" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-2" path="credits" color="secondary" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-3" path="credits" color="success" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-4" path="credits" color="danger" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-5" path="credits" color="warning" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-6" path="credits" color="info" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-7" path="credits" color="white" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-8" path="credits" color="black" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-9" path="credits" color="body" breakpoint="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-10" path="credits" color="body-tertiary" breakpoint="sm" search="false" menus="sample" mode="false" >}}Search Input
Set the argument search to true to enable search input.
{{< navbar id="navbar-search-1" search="true" path="credits" color="body" breakpoint="md" menus="sample" mode="false" >}}Set the argument search to false to disable search input.
{{< navbar id="navbar-search-2" search="false" path="credits" color="body" breakpoint="md" menus="sample" mode="false" >}}Mode Switcher
Important
The mode switcher requires Dark Mode to be enabled.
Set the argument mode to true to enable the mode switcher.
{{< navbar id="navbar-mode-1" mode="true" search="false" path="credits" color="body" breakpoint="md" menus="sample" >}}Set the argument mode to false to disable the mode switcher.
{{< navbar id="navbar-mode-2" mode="false" search="false" path="credits" color="body" breakpoint="md" menus="sample" >}}Remarks
See the Navigation Documentation for additional configuration options.