Docs

Navbar

Use the navbar shortcode to display a navigation header with a toggler.
Overview   Brand Logo   Brand Text   Colored Navbar   Search Input   Mode Switcher   Styling   Arguments  

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.

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, depending on the size setting.

markdown 
{{< navbar id="navbar-logo" logo="/img/logo_icon.svg" color="body-tertiary" breakpoint="md" search="false" menu="sample" mode="false" >}}

Brand Text  

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" color="body-tertiary" breakpoint="md" search="false" menu="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" color="primary" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-2" color="secondary" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-3" color="success" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-4" color="danger" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-5" color="warning" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-6" color="info" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-7" color="white" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-8" color="black" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-9" color="body" breakpoint="sm" search="false" menu="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-10" color="body-tertiary" breakpoint="sm" search="false" menu="sample" mode="false" >}}

Search Input  

Set the argument search to true to enable search input.

markdown 
{{< navbar id="navbar-search-1" search="true" color="body-tertiary" breakpoint="md" menu="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" color="body-tertiary" breakpoint="md" menu="sample" >}}

Set the argument mode to false to disable the mode switcher.

markdown 
{{< navbar id="navbar-mode-2" mode="false" search="false" color="body-tertiary" breakpoint="md" menu="sample" >}}

Styling  

The file assets/scss/components/_navbar.scss defines the Hinode-specific styling of the navbar shortcode. Check the Bootstrap documentation  for additional styling options.

// stylelint-disable annotation-no-unknown

// adapted from https://www.codeply.com/p/UsTEwDkzNp#
.checkbox {
	opacity: 0;
	position: absolute;
}

.mode-switch {
    --#{$prefix}mode-switch-width: 3em;
}

.mode-switch .label {
	border-color: var(--#{$prefix}border-color);
    border-style: solid;
    border-width: 1px;
	border-radius: var(--#{$prefix}mode-switch-width);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
	width: var(--#{$prefix}mode-switch-width);
    transform: scale(0.9);
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.mode-switch .label .ball {
    background-color: var(--#{$prefix}border-color);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
	width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
	transition: transform 0.2s linear;
}

.mode-switch .checkbox:checked + .label .ball {
	transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
}

@if $enable-dark-mode {
    [data-bs-theme="light"] .mode-switch .ball {
        transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
    }
}

.mode-switch .fa-moon {
	color: $yellow;
    transform: scale(0.8);
}

.mode-switch .fa-sun {
	color: var(--#{$prefix}bs-body-color);
    transform: scale(0.8);
}

.mode-toggle > input {
	z-index: 1;
	cursor: pointer;
    height: 25px;
    width: 25px;
}

.mode-toggle > label {
	z-index: 0;
	cursor: pointer;
}

.mode-toggle .label svg {
    height: 1em;
    width: 1.25em;
}

// Source: https://jsfiddle.net/njhgr40m/

@if $enable-dark-mode {
    [data-bs-theme-animate="true"] .navbar {
        transition: 0.5s ease-in-out;
    }
}

.navbar {
    --bs-navbar-expanded-color: var(--bs-body-bg);
    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);

    background-color: transparent;

    @each $state, $val in $theme-colors {
        --bs-navbar-color-#{$state}: #{$val};
    }
}

.navbar[data-transparent="true"] {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.nav-active, .navbar-expanded {
    background-color: var(--bs-navbar-expanded-color);
    border-bottom: 1px solid var(--bs-secondary-bg);
}

.nav-link {
    margin: 0 .15rem;
    display: inline-flex;
}

.navbar-title, .navbar-title-center, .navbar-title-start {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    padding: 0 $spacer;
    width: 100% !important;
}

.navbar-title, .navbar-title-center {
    text-align: center !important;
}

.navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
    border-bottom: solid 1px var(--bs-navbar-hover-color);
    margin-bottom: -1px;
}

.navbar-brand {
    margin-right: 0;
}

.navbar-contrast {
    --bs-navbar-color: white !important;
    --bs-navbar-hover-color: white !important;
    --bs-navbar-disabled-color: white !important;
    --bs-navbar-active-color: white !important;
    --bs-navbar-toggler-color: white;

    .navbar-title, .navbar-brand, .mode-switch {
        --#{$prefix}border-color: white;

        color: white !important;
    }

    .mode-switch .fa-moon {
        color: $white;
    }
}

.navbar-expanded {
    box-shadow: $box-shadow-sm;
    min-height: 100vh;
    align-items: start;
}

.navbar-expanded .navbar-collapse {
    margin-top: 2rem;
}

@each $h, $size in $font-sizes {
    .navbar-fs-#{$h} {
        font-size: #{$size};
    }
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    @if $infix != '' {
        @include media-breakpoint-up($next) {
            .navbar#{$infix}-fs { 
                font-size: inherit;
            } 
        }
    }
}

.navbar-icon {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
}

.nav-item .vr {
    color: var(--bs-navbar-color);
}

.navbar .nav-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.navbar-collapse:not(.show, .collapsing) .nav-item:first-of-type {
    // double padding between brand logo / search bar and first nav item
    // only apply when navbar is fully expanded (not toggled to show)
    padding-left: var(--bs-navbar-nav-link-padding-x);
}

// Remove padding when navbar is toggled open on small devices
.navbar-collapse.show .nav-item:first-of-type {
    padding-left: 0;
}

.navbar-collapse .dropdown {
    display: inline;
    align-items: normal;
}

.navbar-expanded .btn {
    font-size: 1em;
}

.navbar .btn {
    border-radius: #{$theme-border-radius};    
}

.navbar-expanded .search-input {
    margin-bottom: 1rem;
}

/* Remove border from toggler */
.navbar-toggler {
    border: 0 if($enable-important-utilities, !important, null);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none if($enable-important-utilities, !important, null);
    box-shadow: none if($enable-important-utilities, !important, null);
    border: 0 if($enable-important-utilities, !important, null);
}

.fw-30 {
    width: 30px !important;
}

/* Lines of the Toggler */
.toggler-icon {
    width: 30px;
    height: 3px;
    display: block;
    transition: all 0.2s;
}

/* Adds Space between the lines */
.middle-bar {
    margin: 5px auto;
}

/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

/* State when navbar is opened (END) */

/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

/* State when navbar is collapsed (END) */

/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
    background-color: var(--bs-navbar-toggler-color);
}

.emphasis {
    background-color: var(--bs-navbar-toggler-color);
}

@include color-mode(dark) {
    .emphasis {
        background-color: $white if($enable-important-utilities, !important, null);
    }
}

// stylelint-enable annotation-no-unknown

.navbar .dropdown-divider-bg {
    color: var(--#{$prefix}navbar-color);
}

:root {
    --dropdown-horizontal-bg: var(--#{$prefix}light);
    --navbar-offset: #{$navbar-offset-xs};
}

.navbar-container {
    min-height: calc(2rem + 10px);
    width: 100% !important;
}

@include media-breakpoint-up(#{$navbar-size}) {
    :root {
        --navbar-offset: #{$navbar-offset};
    }

    .navbar-container {
        width: auto !important;
    }

    .navbar-title {
        text-align: initial !important;
        padding: 0;
    }

    .navbar-brand {
        margin-right: var(--bs-navbar-brand-margin-end);
    }
}

@if $enable-dark-mode {
    @include color-mode(dark) {
        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
    }
}

.dropdown-horizontal {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        @include media-breakpoint-up($next) {
            &#{$infix} { 
                position: static !important; 
            } 
    
            &#{$infix} > .dropdown-menu {
                opacity: 0;
                display: block;
                visibility: hidden;
                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
                width: 100%;
                height: auto;
                text-align: center;
                border-radius: 0;
                border: 0;
                margin-top: $dropdown-horizontal-margin-top;
                padding-top: $dropdown-horizontal-padding-y;
                padding-bottom: $dropdown-horizontal-padding-y;
                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
            
                @include transition($dropdown-transition);
            }
    
            &#{$infix} > .dropdown-menu.show {
                visibility: visible;
                opacity: 1;
            }
    
            &#{$infix} > .dropdown-menu > li {
                display: inline-block;
                padding-left: $spacer;
                padding-right: $spacer;
            }
    
            &#{$infix} > .dropdown-menu > li > a {
                padding-left: .25 * $spacer;
                padding-right: .25 * $spacer;

                &.active,
                &:hover,
                &:focus {
                    color: var(--bs-body-color);
                    border-bottom: solid 1px var(--bs-navbar-hover-color);
                    margin-bottom: -1px;
                    background-color: transparent;
                }
            }
            
            &#{$infix} > .nav-link.show {
                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
            }            
        }
    }
}

.navbar-overlay {
    position: absolute;
    z-index: $zindex-fixed;
}

.form-control.is-search {
    border: 1px solid var(--bs-border-color) !important;
}

.d-none-main-light, .d-none-inline-main-light {
  display: none !important;
}

.d-none-main-dark {
  display: block !important;
}

.d-none-inline-main-dark {
  display: inline !important;
}

[data-bs-main-theme="dark"] .d-none-main-light {
  display: block !important;
}

[data-bs-main-theme="dark"] .d-none-inline-main-light {
  display: inline !important;
}

[data-bs-main-theme="dark"] .d-none-main-dark, [data-bs-main-theme="dark"] .d-none-inline-main-dark {
  display: none !important;
}

.inline-menu li {
  display: inline-block;
  padding: 0.5rem;
  color: var(--bs-nav-link-color);
}

.inline-menu li .active, .inline-menu li>a:hover {
    box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
}

ul.inline-menu {
  padding: 0;
}

body.navbar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
breakpoint select md v1.0.0      Breakpoint of the element. Supported values: [none, xs, sm, md, lg, xl, xxl].
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.
menu string main v2.0.0      Name of the site menu.
menus string main v2.0.0      Use menu instead. 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.
transparent bool v1.19.0      Flag indicating the navbar should be transparent. When set, the navbar uses the current section’s background color and applies a semi- transparent blur filter. The site’s body color is used as fallback. If set, the color mode of the current section is used too. When no mode is set, the navbar applies a mode with the best contrast.
Name Type Required Default
breakpoint select md
v1.0.0      Breakpoint of the element. Supported values: [none, xs, sm, md, lg, xl, xxl].
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.
menu string main
v2.0.0      Name of the site menu.
menus string main
v2.0.0      Use menu instead. 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.
transparent bool
v1.19.0      Flag indicating the navbar should be transparent. When set, the navbar uses the current section’s background color and applies a semi- transparent blur filter. The site’s body color is used as fallback. If set, the color mode of the current section is used too. When no mode is set, the navbar applies a mode with the best contrast.
On this page