Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Navbar

Share via
Hinode
Link copied to clipboard

Use the navbar shortcode to display a navigation header with a toggler.

On this page
 

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

Brand
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
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.
idNoOptional id 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.
classNoOptional class attribute of the navbar container.

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.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
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.

Brand
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
markdown
{{< navbar id="navbar-title" title="Brand" path="credits" color="body" size="md" search="false" menus="sample" mode="false" >}}

Colored navbar  

New in v0.18.0 - To improve accessibility, navbars with a color primary, secondary, success, or danger are set to a style with higher contrast.


New in v0.14.1 -To improve color-mode compatibility, the colors dark and light are no longer supported. Use the adaptive colors body and body-tertiary instead, or apply a static white or black color.


New in v0.14.1 - 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.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
markdown
{{< navbar id="navbar-color-1" path="credits" color="primary" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-2" path="credits" color="secondary" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-3" path="credits" color="success" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-4" path="credits" color="danger" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-5" path="credits" color="warning" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-6" path="credits" color="info" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-7" path="credits" color="white" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-8" path="credits" color="black" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-9" path="credits" color="body" size="sm" search="false" menus="sample" mode="false" >}}
{.mb-3}

{{< navbar id="navbar-color-10" path="credits" color="body-tertiary" size="sm" search="false" menus="sample" mode="false" >}}

Search input  

Set the argument search to true to enable search input.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
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.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
markdown
{{< navbar id="navbar-search-2" search="false" path="credits" color="body" size="md" menus="sample" mode="false" >}}

Mode switcher  

 
This setting requires dark mode to be enabled.

Set the argument mode to true to enable the mode switcher.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
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.

Hinode logo
  • About 
  • Guides 
    • Getting started 
    • Adding packages 
    • Optimization 
  • GitHub  
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: September 2, 2023 • Convert to markdown only (39f1268)
On this page
  • Overview
  • Arguments
  • Examples
    • Brand text and logo
    • Colored navbar
    • Search input
    • Mode switcher
  • Remarks
Navbar
Navbar
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard