Docs: show how to include dividers in the siteNav

[damithc]

v1.15.2

Suggestion: provide a way to have dividers in the siteNav. An example (from Hexo):

[Chng-Zhi-Xuan]

<navigation>
  * Getting Started
  * [Home :glyphicon-home:]({{baseUrl}}/index.html)
  * <br></br>
  * <hr></hr>
  * Basic Usage
  * [Home :glyphicon-home:]({{baseUrl}}/index.html)
</navigation>

It is already supported, just tested with the above template 😀

Key is to use <br> and <hr> as a list item.

[yamgent]

Key is to use <br> and <hr> as a list item.

This also works (<br> need not be a list item, and we can use Markdown's horizontal bar)

<navigation>
  * Getting Started
  * [Home :glyphicon-home:]({{baseUrl}}/index.html)
  <br><br>
  * ------
  * Basic Usage
  * [Home :glyphicon-home:]({{baseUrl}}/index.html)
</navigation>

Should we document it as part of tips and tricks?

[Chng-Zhi-Xuan]

The since the <navigation> area is assumed to only contain list items (by Page.js#formatSiteNav), I would prefer not to have HTML tags separating the list items. I think your workaround works because Markdown-It treats the <br> tag as part of the previous line?

As for documentation, we can seamlessly add it to the site-nav example within Tweaking the page structure section which I think fits better than Tips & Tricks section.

[damithc]

Nice find. This worked too:

* [Object-Oriented Programming]({{ baseUrl }}/programming/toc/oop.html)
* ------------------------------------------------------------------------
* <br>%%**Appendices**%%<br>
* [Appendix A: Installing 3rd Party Modules]({{ baseUrl }}/programming/toc/thirdparty.html)

Should we document it as part of tips and tricks?

Can even be a part of the main documentation of site-nav

[acjh]

Do we render separate lists around the divider? Can someone help to check the HTML of the Hexo example?

[acjh]

Hexo doesn't use a list, but it's one <div>:

<div class="inner">
  <strong class="sidebar-title">Getting Started</strong>
  <a href="/docs/" class="sidebar-link current">Overview</a>
  <a href="/docs/setup" class="sidebar-link">Setup</a>
  <a href="/docs/configuration" class="sidebar-link">Configuration</a>
  <a href="/docs/commands" class="sidebar-link">Commands</a>
  <a href="/docs/migration" class="sidebar-link">Migration</a>
  <strong class="sidebar-title">Basic Usage</strong>
  <a href="/docs/writing" class="sidebar-link">Writing</a>
  ...
</div>

Let's show an example that keeps it to one list.

[Tejas2805]

We already have something like this in the Reader Facing Features Section. Do you all still want to document it separately in siteNav ? Will do that then.

[damithc]

We already have something like this in the Reader Facing Features Section. Do you all still want to document it separately in siteNav ? Will do that then.

I think it's better to mention it as an additional tip. In fact, we can also mention how to add a divider to navigation menus too. e.g.,

[Tejas2805]

Fixed by #1063 This can be closed.

[Tejas2805]

Can be closed now.