Width

The theme adjusts the menu width based on browser size.

If you want to change the chosen default width, you can add CSS variables to layouts/partials/custom-header.html.

The menu width changes for different screen sizes:

Screen Size	Screen Width	Menu Width
Small	< 48rem	14.375rem
Medium	48rem - 60rem	14.375rem
Large	>= 60rem	18.75rem

You can change the menu width but not the screen width breakpoints.

To adjust the menu width, use these CSS variables. Note that --MENU-WIDTH-S is for the mobile menu flyout on small screens.

<style>
:root {
    --MENU-WIDTH-S: 14.375rem;
    --MENU-WIDTH-M: 14.375rem;
    --MENU-WIDTH-L: 18.75rem;
}
</style>

Title

Option With the default partials for the logo, The site title will also be used for the text at the top of the sidebar. If you want to show a different text in the sidebar, you can overwrite linkTitle.

hugo.

[params]
  linkTitle = 'Relearn'

params:
  linkTitle: Relearn

{
   "params": {
      "linkTitle": "Relearn"
   }
}

Home Button Configuration

By default, the theme displays a home button between search form and navigation menu. The Home button serves as an alternative to clicking the logo.

Option To hide the Home button on the left menu, set disableLandingPageButton=true.

hugo.

[params]
  disableLandingPageButton = true

params:
  disableLandingPageButton: true

{
   "params": {
      "disableLandingPageButton": true
   }
}

Option To change its icon or text, configure the landingPageName for your defined languages.

hugo.

[languages]
  [languages.en]
    [languages.en.params]
      landingPageName = '<i class="fa-fw fas fa-home"></i> Home'

  [languages.pir]
    [languages.pir.params]
      landingPageName = '<i class="fa-fw fas fa-home"></i> Arrr! Homme'

languages:
  en:
    params:
      landingPageName: <i class="fa-fw fas fa-home"></i> Home
  pir:
    params:
      landingPageName: <i class="fa-fw fas fa-home"></i> Arrr! Homme

{
   "languages": {
      "en": {
         "params": {
            "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Home"
         }
      },
      "pir": {
         "params": {
            "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Arrr! Homme"
         }
      }
   }
}

If this option isn’t set for a specific language, it will use these default values

hugo.

[params]
  landingPageName = '<i class="fa-fw fas fa-home"></i> Home'

params:
  landingPageName: <i class="fa-fw fas fa-home"></i> Home

{
   "params": {
      "landingPageName": "\u003ci class=\"fa-fw fas fa-home\"\u003e\u003c/i\u003e Home"
   }
}

History

Option Turn on showVisitedLinks=true to see checkmarks next to visited pages in the main menu. This also adds a Clear History option at the bottom of the menu to remove all checkmarks. Note that checkmarks will disappear if you rebuild your site, as the page IDs may change.

hugo.

[params]
  showVisitedLinks = true

params:
  showVisitedLinks: true

{
   "params": {
      "showVisitedLinks": true
   }
}

To change the menu footer, edit the layouts/partials/menu-footer.html file. Check out the Partials section for more ways to customize your site.

Search

Configure Search

The theme offers three levels of search through the menu’s search form:

In-page search: Highlights search terms on the current page
Search popup: Opens a popup with results from other pages
Dedicated search page: Accessible by clicking the magnifier glass or pressing ENTER

Each level requires the previous one to be enabled. If no search is configured, the search form won’t appear.

Option All levels are enabled by default. Disable them in hugo.toml:

In-page search: disableSearch=true
Search popup: disableSearchIndex=true
Dedicated search page: disableSearchPage=true

hugo.

[params]
  disableSearch = true
  disableSearchIndex = true
  disableSearchPage = true

params:
  disableSearch: true
  disableSearchIndex: true
  disableSearchPage: true

{
   "params": {
      "disableSearch": true,
      "disableSearchIndex": true,
      "disableSearchPage": true
   }
}

Option Default URLs can be changed with the following parameter

Search popup: searchindex.js set by searchIndexURL
Dedicated search page: search/index.html set by searchPageURL

hugo.

[params]
  searchIndexURL = 'omnisearchindex.js'
  searchPageURL = 'omnisearch'

params:
  searchIndexURL: omnisearchindex.js
  searchPageURL: omnisearch

{
   "params": {
      "searchIndexURL": "omnisearchindex.js",
      "searchPageURL": "omnisearch"
   }
}

Note

Only change these if you have content at those URLs. This can happen with uglyURLs=true in hugo.toml and having a content file at content/search.md.

Check for duplicate URLs by running hugo --printPathWarnings.

Supported Languages

The Lunr search library doesn’t support all languages of the theme. Unsupported languages will show errors in the browser console. Currently unsupported are

Czech
Indonesian
Polish
Swahili

Mixed Language Support

Option In case your page’s content contains text in multiple languages (for example, you are writing a Piratish documentation for your English API), you can set those languages in additionalContentLanguage to broaden the search.

hugo.

[params]
  additionalContentLanguage = ['en']

params:
  additionalContentLanguage:
  - en

{
   "params": {
      "additionalContentLanguage": [
         "en"
      ]
   }
}

You can add multiple languages to this array.

Note

Use the base language code. For example, if your page is using zh-CN, add zh to this parameter.

The sidebar contains your content’s navigation menu, but you can also add extra menu entries or shortcuts in a separate section.

For internal links, use the pageRef property instead of url. Learn more about Hugo’s menu configuration.

Title

Option By default, the shortcut menu has a title ("More" in English).

You can disable this title with disableShortcutsTitle=true.

hugo.

[params]
  disableShortcutsTitle = true

params:
  disableShortcutsTitle: true

{
   "params": {
      "disableShortcutsTitle": true
   }
}

To change the title, update your local i18n translation file.

[Shortcuts-Title]
other = "Other Great Stuff"

Single Language Example

Edit hugo.toml and add [[menu.shortcuts]] entries for each link:

hugo.

[menu]
  [[menu.shortcuts]]
    identifier = 'ds'
    name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
    url = 'https://github.com/McShelby/hugo-theme-relearn'
    weight = 10

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-camera"></i> Showcases'
    pageRef = '/showcase'
    weight = 11

  [[menu.shortcuts]]
    identifier = 'hugodoc'
    name = '<i class="fa-fw fas fa-bookmark"></i> Hugo Documentation'
    url = 'https://gohugo.io/'
    weight = 20

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-bullhorn"></i> Credits'
    pageRef = '/more/credits'
    weight = 30

  [[menu.shortcuts]]
    name = '<i class="fa-fw fas fa-tags"></i> Tags'
    pageRef = '/tags'
    weight = 40

menu:
  shortcuts:
  - identifier: ds
    name: <i class="fa-fw fab fa-github"></i> GitHub Repo
    url: https://github.com/McShelby/hugo-theme-relearn
    weight: 10
  - name: <i class="fa-fw fas fa-camera"></i> Showcases
    pageRef: /showcase
    weight: 11
  - identifier: hugodoc
    name: <i class="fa-fw fas fa-bookmark"></i> Hugo Documentation
    url: https://gohugo.io/
    weight: 20
  - name: <i class="fa-fw fas fa-bullhorn"></i> Credits
    pageRef: /more/credits
    weight: 30
  - name: <i class="fa-fw fas fa-tags"></i> Tags
    pageRef: /tags
    weight: 40

{
   "menu": {
      "shortcuts": [
         {
            "identifier": "ds",
            "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
            "url": "https://github.com/McShelby/hugo-theme-relearn",
            "weight": 10
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
            "pageRef": "/showcase",
            "weight": 11
         },
         {
            "identifier": "hugodoc",
            "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Hugo Documentation",
            "url": "https://gohugo.io/",
            "weight": 20
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Credits",
            "pageRef": "/more/credits",
            "weight": 30
         },
         {
            "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Tags",
            "pageRef": "/tags",
            "weight": 40
         }
      ]
   }
}

Multilingual Example

For multilingual sites, set different menus for each language in hugo.toml:

hugo.

[languages]
  [languages.en]
    languageName = 'English'
    title = 'Hugo Relearn Theme'
    weight = 1

    [languages.en.menu]
      [[languages.en.menu.shortcuts]]
        identifier = 'ds'
        name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-camera"></i> Showcases'
        pageRef = '/showcase'
        weight = 11

      [[languages.en.menu.shortcuts]]
        identifier = 'hugodoc'
        name = '<i class="fa-fw fas fa-bookmark"></i> Hugo Documentation'
        url = 'https://gohugo.io/'
        weight = 20

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-bullhorn"></i> Credits'
        pageRef = '/more/credits'
        weight = 30

      [[languages.en.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-tags"></i> Tags'
        pageRef = '/tags'
        weight = 40

  [languages.pir]
    languageName = 'Arrr! Pirrratish'
    title = 'Captain Hugo Relearrrn Theme'
    weight = 2

    [languages.pir.menu]
      [[languages.pir.menu.shortcuts]]
        identifier = 'ds'
        name = '<i class="fa-fw fab fa-github"></i> GitHub Repo'
        url = 'https://github.com/McShelby/hugo-theme-relearn'
        weight = 10

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-camera"></i> Showcases'
        pageRef = '/showcase'
        weight = 11

      [[languages.pir.menu.shortcuts]]
        identifier = 'hugodoc'
        name = '<i class="fa-fw fas fa-bookmark"></i> Captain Hugo Documentation'
        url = 'https://gohugo.io/'
        weight = 20

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-bullhorn"></i> Crrredits'
        pageRef = '/more/credits'
        weight = 30

      [[languages.pir.menu.shortcuts]]
        name = '<i class="fa-fw fas fa-tags"></i> Arrr! Tags'
        pageRef = '/tags'
        weight = 40

languages:
  en:
    languageName: English
    menu:
      shortcuts:
      - identifier: ds
        name: <i class="fa-fw fab fa-github"></i> GitHub Repo
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: <i class="fa-fw fas fa-camera"></i> Showcases
        pageRef: /showcase
        weight: 11
      - identifier: hugodoc
        name: <i class="fa-fw fas fa-bookmark"></i> Hugo Documentation
        url: https://gohugo.io/
        weight: 20
      - name: <i class="fa-fw fas fa-bullhorn"></i> Credits
        pageRef: /more/credits
        weight: 30
      - name: <i class="fa-fw fas fa-tags"></i> Tags
        pageRef: /tags
        weight: 40
    title: Hugo Relearn Theme
    weight: 1
  pir:
    languageName: Arrr! Pirrratish
    menu:
      shortcuts:
      - identifier: ds
        name: <i class="fa-fw fab fa-github"></i> GitHub Repo
        url: https://github.com/McShelby/hugo-theme-relearn
        weight: 10
      - name: <i class="fa-fw fas fa-camera"></i> Showcases
        pageRef: /showcase
        weight: 11
      - identifier: hugodoc
        name: <i class="fa-fw fas fa-bookmark"></i> Captain Hugo Documentation
        url: https://gohugo.io/
        weight: 20
      - name: <i class="fa-fw fas fa-bullhorn"></i> Crrredits
        pageRef: /more/credits
        weight: 30
      - name: <i class="fa-fw fas fa-tags"></i> Arrr! Tags
        pageRef: /tags
        weight: 40
    title: Captain Hugo Relearrrn Theme
    weight: 2

{
   "languages": {
      "en": {
         "languageName": "English",
         "menu": {
            "shortcuts": [
               {
                  "identifier": "ds",
                  "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
                  "pageRef": "/showcase",
                  "weight": 11
               },
               {
                  "identifier": "hugodoc",
                  "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Hugo Documentation",
                  "url": "https://gohugo.io/",
                  "weight": 20
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Credits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Tags",
                  "pageRef": "/tags",
                  "weight": 40
               }
            ]
         },
         "title": "Hugo Relearn Theme",
         "weight": 1
      },
      "pir": {
         "languageName": "Arrr! Pirrratish",
         "menu": {
            "shortcuts": [
               {
                  "identifier": "ds",
                  "name": "\u003ci class=\"fa-fw fab fa-github\"\u003e\u003c/i\u003e GitHub Repo",
                  "url": "https://github.com/McShelby/hugo-theme-relearn",
                  "weight": 10
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-camera\"\u003e\u003c/i\u003e Showcases",
                  "pageRef": "/showcase",
                  "weight": 11
               },
               {
                  "identifier": "hugodoc",
                  "name": "\u003ci class=\"fa-fw fas fa-bookmark\"\u003e\u003c/i\u003e Captain Hugo Documentation",
                  "url": "https://gohugo.io/",
                  "weight": 20
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-bullhorn\"\u003e\u003c/i\u003e Crrredits",
                  "pageRef": "/more/credits",
                  "weight": 30
               },
               {
                  "name": "\u003ci class=\"fa-fw fas fa-tags\"\u003e\u003c/i\u003e Arrr! Tags",
                  "pageRef": "/tags",
                  "weight": 40
               }
            ]
         },
         "title": "Captain Hugo Relearrrn Theme",
         "weight": 2
      }
   }
}

To show pages only in the shortcuts menu you have two choices

Create a headless branch bundle, _index.md in its own folder with the below front matter. The branch bundle will not be contained in the sitemap.

content/showcase/_index.en.md

+++
title = 'Showcase'

[_build]
  list = 'never'
  publishResources = true
  render = 'always'
+++

---
_build:
  list: never
  publishResources: true
  render: always
title: Showcase
---

{
   "_build": {
      "list": "never",
      "publishResources": true,
      "render": "always"
   },
   "title": "Showcase"
}

Or, put a child page inside a headless branch bundle with the following front matter in the bundle. This causes the child but not the branch bundle to be contained in the sitemap.

content/more/_index.en.md

+++
[_build]
  list = 'never'
  publishResources = false
  render = 'never'
+++

---
_build:
  list: never
  publishResources: false
  render: never
---

{
   "_build": {
      "list": "never",
      "publishResources": false,
      "render": "never"
   }
}

The child page can be any type of content.

content/more/credits_index.en.md

+++
title = 'Credits'
+++

---
title: Credits
---

{
   "title": "Credits"
}

Sidebar

Width

Header & Footer

Search

Shortcut Menu

Width

Changing Menu Width

Header & Footer

Title

Home Button Configuration

History

Footer

Search

Configure Search

Supported Languages

Mixed Language Support

Shortcut Menu

Title

Single Language Example

Multilingual Example

Displaying Pages Only in the Shortcuts Menu

Sidebar

Width

Header & Footer

Search

Shortcut Menu

Subsections of Sidebar

Width

Changing Menu Width

Header & Footer

Title

Home Button Configuration

History

Footer

Search

Configure Search

Supported Languages

Mixed Language Support

Shortcut Menu

Title

Single Language Example

Multilingual Example

Displaying Pages Only in the Shortcuts Menu