The navbar of your website

Navbar fragment can show a logo/image, a menu with support for external links and a special icon link useful for linking to Github or Gitlab.

Note: Search doesn’t look very good in this page because there are two navbars in the page which is not expected. Please use search in other pages.

Code

+++
fragment = "nav"
#disabled = true
date = "2018-05-17"
weight = 110
background = "secondary"
search = true
#sticky = true # Default is false

[breadcrumb]
  display = true # Default value is false
  #level = 0 # Default is 1
  background = "light"

# Branding options
[asset]
  image = "logo.svg"
  text = "Syna"

[repo_button]
  url = "https://github.com/okkur/syna"
  text = "Star" # default: "Star"
  icon = "fab fa-github" # defaults: "fab fa-github"
+++

Note

Use one instance of this fragment per page. Running more might lead to unexpected issues.

Menus

• .Site.Menus.main

Variables

search

type: boolean
default: false

If set to true, search is enabled within the navbar.
Note: The additional input field used for search will alter the menu layout.

sticky

type: boolean
default: false

If set to true, navbar will stick to the top of the screen whenever page scrolls past it.

prepend, postpend

type: array of objects

Menu like objects that are used to add menus before and after the main menu.

prepend/postpend.url

type: string

prepend/postpend.name

type: string

breadcrumb

type: object

If object is set, breadcrumbs will be shown under the navbar.

breadcrumb.display

type: boolean
default: true

breadcrumb.level

type: number
default: 1

Define the section level the breadcrumb will start being shown.

The default value 1 would lead to the following being defined:

content/_index # level 0, not shown
content/blog/_index # level 1, shown
content/blog/article-1 # level 2, shown

breadcrumb.background

type: string
recommended: primary, secondary, white, light, dark
accepted values: primary, secondary, white, light, dark, warning, success, danger, info, transparent

asset

type: asset object

Asset will be shown as a clickable logo directing to the main page.

repo_button

type: object

Enable a button on the top right navbar. Usually used to link to your repository such as Github or Gitlab.
The icon can be customized via repo_button.icon.

repo_button.url

type: string

repo_button.text

type: string
default: star

repo_button.icon

type: string
default: fab fa-github

Global variables are documented as well and have been omitted from this page.