Navbar
Use the navbar shortcode to display a navigation header with a toggler.
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" size="md" search="false" menus="sample" title="Brand" mode="false" >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attribute of the navbar container. | ||
| color | select | Background theme color of the navbar. Set the color to body or body-tertiary for the navbar to respond to color mode changes (e.g. switching between dark and light). The navigation bar is transparent when no color is set, but is set to the body color when scrolling to enhance the contrast. 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. |
||
| 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 | yes | Path of the active page. | |
| search | bool | true | Flag to include a search input. | |
| size | select | md | Breakpoint of the navbar toggler. Supported values: [xs, sm, md, lg, xl]. | |
| title | string | Brand title, displayed when the logo is not set. Defaults to the site’s title. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
| Class attribute of the navbar container. | |||
| color | select | ||
Background theme color of the navbar. Set the color to body or body-tertiary for the navbar to respond to color mode changes (e.g. switching between dark and light). The navigation bar is transparent when no color is set, but is set to the body color when scrolling to enhance the contrast. 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. |
|||
| 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 | yes | |
| Path of the active page. | |||
| search | bool | true | |
| Flag to include a search input. | |||
| size | select | md | |
| Breakpoint of the navbar toggler. Supported values: [xs, sm, md, lg, xl]. | |||
| title | string | ||
| Brand title, displayed when the logo is not set. Defaults to the site’s title. | |||
Change the style of your navbar with shortcode arguments.
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" size="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" size="md" search="false" menus="sample" mode="false" >}}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" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-2" path="credits" color="secondary" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-3" path="credits" color="success" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-4" path="credits" color="danger" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-5" path="credits" color="warning" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-6" path="credits" color="info" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-7" path="credits" color="white" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-8" path="credits" color="black" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-9" path="credits" color="body" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}
{{< navbar id="navbar-color-10" path="credits" color="body-tertiary" size="sm" search="false" menus="sample" mode="false" >}}Set the argument search to true to enable search input.
{{< navbar id="navbar-search-1" search="true" path="credits" color="body" size="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" size="md" menus="sample" mode="false" >}}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" size="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" size="md" menus="sample" >}}See the Navigation Documentation for additional configuration options.