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.
The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| path | Yes | Required path of the active page. |
| menus | No | Optional name of the menu configuration, defaults to “main”. |
| size | No | Optional breakpoint of the navbar toggler, either “xs”, “sm”, “md” (default), “lg”, or “xl”. |
| color | No | Optional background color of the navbar, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, “black” or “body”. Set the color to “body” 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. |
| search | No | Optional flag to include a search input, defaults to the parameter “logo” set in the “navigation” section of the site’s parameter configuration. |
| logo | No | Optional address of the logo image, defaults to the parameter “logo” set in the “navigation” section of the site’s parameter configuration. |
| title | No | Optional brand title, displayed when the logo is not set. Defaults to the site’s title. |
As an example, the following shortcode displays a navigation header with a body color.
{{< navbar path="credits" color="body" size="sm" search="false" menus="sample" title="Brand" >}}