Navbar

Share via

Use 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.

markdown
{{< navbar id="navbar-overview" path="credits" color="body" size="md" search="false" menus="sample" title="Brand" mode="false" >}}

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
pathYesRequired path of the active page.
menusNoOptional name of the menu configuration, defaults to “main”.
sizeNoOptional breakpoint of the navbar toggler, either “xs”, “sm”, “md” (default), “lg”, or “xl”.
colorNoOptional background color of the navbar, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “white”, “black”, “body”, or “body-tertiary”. 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.
modeNoOptional flag to include a color mode switcher, default is “true” (if dark mode is enabled).
searchNoOptional flag to include a search input, defaults to the parameter “search” set in the “navigation” section of the site’s parameter configuration.
logoNoOptional address of the logo image, defaults to the parameter “logo” set in the “navigation” section of the site’s parameter configuration.
titleNoOptional brand title, displayed when the logo is not set. Defaults to the site’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" 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.

markdown
{{< navbar id="navbar-title" title="Brand" path="credits" color="body" size="md" search="false" menus="sample" mode="false" >}}

Colored navbar

Set the color argument to define the background color with a matching title color.

markdown
<div class="mb-3">{{< navbar id="navbar-color-1" path="credits" color="primary" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-2" path="credits" color="secondary" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-3" path="credits" color="success" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-4" path="credits" color="danger" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-5" path="credits" color="warning" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-6" path="credits" color="info" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-7" path="credits" color="white" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-8" path="credits" color="black" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-9" path="credits" color="body" size="sm" search="false" menus="sample" mode="false" >}}</div>
<div class="mb-3">{{< navbar id="navbar-color-10" path="credits" color="body-tertiary" size="sm" search="false" menus="sample" mode="false" >}}</div>

Search input

Set the argument search to true to enable search input.

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

markdown
{{< navbar id="navbar-search-2" search="false" path="credits" color="body" size="md" menus="sample" mode="false" >}}

Mode switcher

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" size="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" size="md" menus="sample" >}}

Remarks

See the navigation documentation for additional configuration options.

Last updated: May 23, 2023 • Fix navbar collapse bahavior (fdb1e4c)