Docs
Navbar
Last modified on June 20, 2025 • 6 min read • 1,067 wordsUse the navbar shortcode to display a navigation header with a toggler.
Overview
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. |
||
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. |
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. |
|||
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. |
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
dark
andlight
are no longer supported since v0.14.1 . Use the adaptive colorsbody
andbody-tertiary
instead, or apply a staticwhite
orblack
color. The background colorswhite
andblack
usedata-bs-theme
to 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.