add support for short nav title

_layouts/sidebar.html

@@ -19,7 +19,7 @@
           {% if page.section or page.section_id %}
           <li class="breadcrumb-item">{{ page.section | default: page.section_id }}</li>
           {% endif %}
-          <li class="breadcrumb-item" aria-current="page">{{ page.title }}</li>
+          <li class="breadcrumb-item" aria-current="page">{{ page.nav | default: page.title }}</li>
         </ol>
       </nav>
 
@@ -76,7 +76,7 @@
             </button>
             <div class="collapse{% if page.section == p.section_id or page.section_id == p.section_id %} show{% endif %}" id="{{ p.section_id | slugify }}-collapse">
               <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-                <li><a href="{{ p.url | relative_url }}" class="link-dark rounded{% if page.url == p.url %} nav-active{% endif %}">{{ p.title }}</a></li>
+                <li><a href="{{ p.url | relative_url }}" class="link-dark rounded{% if page.url == p.url %} nav-active{% endif %}">{{ p.nav | default: p.title }}</a></li>
                 {% for c in p_children %}
                   {% comment %} figure out prev/next pages for active section child {% endcomment %}
                   {% if c.url == page.url %}
@@ -98,7 +98,7 @@
                       {% assign next_page_title = p_children[next_number].title %}{% assign next_page_url = p_children[next_number].url %}
                     {% endif %}
                   {%- endif -%}
-                <li><a href="{{ c.url | relative_url }}" class="link-dark rounded{% if page.url == c.url %} nav-active{% endif %}">{{ c.title }}</a></li>
+                <li><a href="{{ c.url | relative_url }}" class="link-dark rounded{% if page.url == c.url %} nav-active{% endif %}">{{ c.nav | default: c.title }}</a></li>
                 {% endfor %}
               </ul>
             </div>
@@ -123,7 +123,7 @@
                   {% assign next_page_title = nav_pages[next_number].title %}{% assign next_page_url = nav_pages[next_number].url %}
                 {% endunless %}
               {%- endif -%}
-            <a href="{{ p.url | relative_url }}" class="side-bar-item link-dark rounded{% if page.url == p.url %} nav-active{% endif %}">{{ p.title }}</a>
+            <a href="{{ p.url | relative_url }}" class="side-bar-item link-dark rounded{% if page.url == p.url %} nav-active{% endif %}">{{ p.nav | default: p.title }}</a>
             {% endif %}
           </li>
         {% endfor %}

content/docs/pages.md

@@ -18,11 +18,12 @@ This information is used to configure the page and navigation added to the site'
 
 Use these values:
 
-- `title:` value will appear as the H1 header at the top of the page, and in navigation links.
-- `topics:` will appear as a small feature below the title (optional). 
+- `title:` (required) value will appear as the H1 header at the top of the page and in navigation links. 
+- `nav:` use nav only if you would like a value different than the title to appear in the sidebar navigation (optional, this can be helpful if you want to use a shorter title in the nav).
+- `topics:` will appear as a small feature below the title (optional). These can serve as keywords to help your readers understand the focus of the section.
 - `description:` will appear as an indented text block below the title (optional). This gives you a chance to summarize the section contents. 
 - `youtubeid:` will add an YouTube video embed (optional). Find the id in the YouTube link. For example, in `https://youtu.be/moJgWrD6dwg` or `https://www.youtube.com/watch?v=moJgWrD6dwg` the youtubeid is `moJgWrD6dwg`.
-- Alternatively, if you don't want `title` or other options to appear on the page, you can over ride the section layout by adding `layout: default` 
+- Alternatively, if you don't want these features to appear on the page, you can over ride the layout by adding `layout:`  with the option `sidebar`, `page`, or `default`.
 
 The sidebar navigation is set up using further front matter values following these rules: