Shortcuts present menu links expanded on page’s footer. Optionally, it can reuse navigation bar configuration to reduce manitainance and provide a consistent navigation experience in your site.

Presentation template

Shortcuts presentation template is defined in the _include/base/shortcuts.html file.

Shortcuts presentation template doesn’t support nesting menus.

Shortcuts presentation template uses bootstrap flex to present menu links in columns. The number of columns may vary depending on the number menu links configured to be presented and the visible area available. As the visible area shrinks, the number of columns is reduced and the number of rows increased.

Configuration files

Shortcuts presentation template reads configuration variables from different configuration files. The first configuration file found wins and stops the reading of other configuration files. This section describes these files and their reading order.

1. Site’s configuration file:

   _config.yml
   

   The site’s configuration file allows you to set configuration variable on all site pages.

   # site.defaults - Set global default values.
   defaults:
     - scope:
         path: "" # an empty string here means all files in the project.
       values:
         with_shortcuts: true
   

   By default, in _config.yml, the with_shortcuts configuration variable is set to true and the with_shortcuts_data configuration variable is not set. The shortcuts presentation template reads variable definitions in the markdown files preamble section.

2. Markdown files (i.e., pages) preamble section:

   ---
   title: Page with shortcuts customization data
   
   with_shortcuts_data:
     navitems:
       - name: "Menu Link 1"
         icon: "fa-solid fa-link"
         menu:
           - name: "Menu Link 1 - Simple Link 1"
             link: "#"
           - name: "Menu Link 1 - Simple Link 2"
             link: "#"
   ---
   
   Page content.
   

   By default, in markdown files, the with_shortcuts configuration variable is not set. It takes the value set in the _config.yml configuration file.

   By default, in markdown files, the with_shortcuts_data and with_navbar_data configuration variables are not set. They take the value set in the _config.yml configuration file or the one you set at page level. Otherwise, when none of these configuration variables are found, shortcuts presentation template reads site’s data files.

3. Site’s data files:

   _data/{{ site.component_data_dirname }}/shortcut.yml
   _data/shortcuts.yml
   

   When none of the shortcuts site data files exist, or is empty, the shortcuts presentation template reads the navbar site data files.

   _data/{{ site.component_data_dirname }}/navbar.yml
   _data/navbar.yml
   

   When none of the navbar site data files exist, or is empty, the shortcuts presentation template reads the theme navbar component’s data file instead.

4. Theme component’s data file.

   _data/base/navbar.yml
   

   The theme component’s data file is always available when you build your site with jekyll-theme-centos container image. This file provides default values for shortcuts presentation template. By default, shortcuts component uses the same data file used by navbar.

   Example:

   {"brand_manifestation"=>"jekyll-theme-centos-base", "navitems"=>[{"name"=>"Documentation", "icon"=>"fa-solid fa-book", "link"=>"/documentation", "menu"=>[], "visible_on"=>["navbar"]}]}
   

Configuration variables

Shortcuts configuration variables let you to control the shortcuts presentation template visibility in the page layout, the content it presents and how it presents it. The presentation order of elements inside the shortcuts presentation template cannot be changed without changing the shortcuts presentation template file.

Shortcuts configuration variables are described in the following table:

The with_shortcuts_data data structure:

---
navitems:
  - name: "Menu Link 1"
    icon: "fa-solid fa-link"
    menu:
      - name: "Menu Link 1 - Simple Link 1"
        link: "#"
      - name: "Menu Link 1 - Simple Link 2"
        link: "#"
    visible_on: ["footer"]

The navitems data structure:

The menu data structure:

Reusing navitems from navigation bar

---
title: This is a page enables both navbar and shortcuts

with_shortcuts: true
with_navbar: true
with_navbar_data:
  navitems:
    - name: "Menu Link 1"
      icon: "fa-solid fa-link"
      menu:
        - name: "Menu Link 1 - Simple Link 1"
          link: "#"
        - name: "Menu Link 1 - Simple Link 2"
          link: "#"
      visible_on: ["navbar"]
    - name: "Menu Link 2"
      icon: "fa-solid fa-link"
      menu:
        - name: "Menu Link 2 - Simple Link 1"
          link: "#"
        - name: "Menu Link 2 - Simple Link 2"
          link: "#"
      visible_on: ["navbar", "footer"]
---

Some content here.

To reuse navigation bar navitems configuration in shortcuts, do the following:

1. Do not define the with_shortcuts_data configuration variable or set any of the shortcuts configuration files. This makes the shortcuts presentation template to read the navigation bar configuration variables instead.

2. Define navbar configuration variables (e.g., with_navbar_data) or navbar configuration files (e.g., _data/navbar.yml). All menu entries you define under navitems property are considered by both to navigation bar and shortcuts presentation templates.

3. Control visibility through visible_on property.

Showing shortcuts at page level

---
title: This is a page with shortcuts enabled and configured

with_shortcuts: true
with_shortcuts_data:
  navitems:
    - name: "Menu Link 1"
      icon: "fa-solid fa-link"
      menu:
        - name: "Menu Link 1 - Simple Link 1"
          link: "#"
        - name: "Menu Link 1 - Simple Link 2"
          link: "#"
      visible_on: ["footer"]
---

Some content here.

To show shortcuts at page level, do the following:

1. Add with_shortcuts configuration variable to page preamble in Markdown files with value true.

2. Add with_shortcuts_data configuration variable to page preamble in Markdown files with content set to the message you want to communicate.

Showing shortcuts at site level

# site.defaults - Set global default values.
defaults:
  - scope:
      path: "" # an empty string here means all files in the project.
    values:
      with_shortcuts: true
      with_shortcuts_data:
        navitems:
          - name: "Menu Link 1"
            icon: "fa-solid fa-link"
            menu:
              - name: "Menu Link 1 - Simple Link 1"
                link: "#"
              - name: "Menu Link 1 - Simple Link 2"
                link: "#"
            visible_on: ["footer"]

To show shortcuts at site level, edit site’s configuration file (e.g., _config.yml) and do the following:

1. Add with_shortcuts configuration variable with value true under defaults values.

2. Add with_shortcuts_data configuration variable with content, and any other supported property, under defaults values.

Hiding shortcuts at page level

---
title: This is a page with shortcuts disabled

with_shortcuts: false
---

Some content here.

To hide shortcuts at page level, set with_shortcuts configuration variable to false in the page preamble of Markdown files.

Hiding shortcuts at site level

# site.defaults - Set global default values.
defaults:
  - scope:
      path: "" # an empty string here means all files in the project.
    values:
      with_shortcuts: false

To hide shortcuts at site level, set with_shortcuts configuration variable to false in the site configuration file _config.yml, under defaults values.

Related topics