Docs

Navbar

Last modified on June 20, 2025 • 7 min read • 1,347 words
Component  
Component  
Share via
Use the navbar shortcode to display a navigation header with a toggler.
Overview   Arguments   Examples   Brand Text and Logo   Colored Navbar   Search Input   Mode Switcher   Remarks  

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.

markdown 
{{< 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.
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.

Examples  

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.

markdown 
{{< 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.

markdown 
{{< 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 and light are no longer supported since v0.14.1  . Use the adaptive colors body and body-tertiary instead, or apply a static white or black color. The background colors white and black use data-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.

markdown 
{{< 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.

markdown 
{{< 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.

markdown 
{{< 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.

markdown 
{{< 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.

markdown 
{{< 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.

On this page: