Topbar

This page is about how to configure the topbar using configuration options. If you want to add further buttons or functionality, see this section.

Your topbar contains the following elements. Some of them are configuarable:

• sidebar: opens the sidebar flyout if in mobile layout
• toc: opens the table of contents in an overlay
• breadcrumb: shows the clickable breadcrumbs
• edit: browses to the editable page if the editURL parameter is set
• source: browses to the chapters source code if source support was activated
• markdown: browses to the chapters Markdown source if markdown support was activated
• print: browses to the chapters printable page if print support was activated
• prev: browses to the previous page if there is one
• next: browses to the next page if there is one
• more: opens the overlay if screen space is limited

Table of Contents

Option Front Matter Set disableToc=true to hide the TOC button on all pages. If the button is hidden, also the keyboard shortcut is disabled. This can be overridden in a page’s front matter.

disableToc = true

disableToc: true

{
   "disableToc": true
}

Breadcrumbs

Option Front Matter Set disableBreadcrumb=true to hide the breadcrumb in the topbar.

Further breadcrumbs settings can be found in the content configuration section.

disableBreadcrumb = true

disableBreadcrumb: true

{
   "disableBreadcrumb": true
}

Edit Button

Option Front Matter If editURL is set to a URL, an edit button will be shown in the topbar. If the button is hidden, also the keyboard shortcut is disabled.

The value can contain the macro ${FilePath} which will be replaced by the file path of your displayed page. If no ${FilePath} is given in the value, the value is treated as if the ${FilePath} was appended at the end of the value. This can be overridden in the pages front matter.

editURL = 'https://github.com/McShelby/hugo-theme-relearn/edit/main/docs/content/${FilePath}'

editURL: https://github.com/McShelby/hugo-theme-relearn/edit/main/docs/content/${FilePath}

{
   "editURL": "https://github.com/McShelby/hugo-theme-relearn/edit/main/docs/content/${FilePath}"
}

The value can also contain the macro ${BaseDir} which will be replaced by the directory ${FilePath} is resolved against - your content directory, or whatever your page was mounted from. The two joined are the location of the page on your disk.

${BaseDir} is written the way a URL writes a path: with forward slashes and without a leading slash. So the same setting works on Windows and on Unix-like systems, where it expands to C:/Users/you/mysite/content and home/you/mysite/content respectively.

This is how you send the edit button to your local editor instead of a web service. For Visual Studio Code:

editURL = 'vscode://file/${BaseDir}/${FilePath}'

editURL: vscode://file/${BaseDir}/${FilePath}

{
   "editURL": "vscode://file/${BaseDir}/${FilePath}"
}

Markdown Button

Option Front Matter You can hide the Markdown button if the Markdown output format is active by setting disableMarkdownButton=true.

disableMarkdownButton = true

disableMarkdownButton: true

{
   "disableMarkdownButton": true
}

Source Button

Option Front Matter You can hide the Source button if the Source output format is active by setting disableSourceButton=true.

disableSourceButton = true

disableSourceButton: true

{
   "disableSourceButton": true
}

Print Button

Option Front Matter You can hide the print button if the print output format is active by setting disablePrintButton=true.

disablePrintButton = true

disablePrintButton: true

{
   "disablePrintButton": true
}

Arrow Navigation

Option Front Matter You can hide the previous/next buttons by setting disableNextPrev=true. If the buttons are hidden, also the keyboard shortcuts are disabled.

disableNextPrev = true

disableNextPrev: true

{
   "disableNextPrev": true
}