Set a Menu in↓markdown↓ CMS

The article on installing the ↓markdown↓^® Content Management System (CMS) showed how quickly a website can be up and running. In ↓markdown↓ CMS (md-CMS) the directories and files under the public website home directory is the website content. Once the content is created, the default demo md-CMS website menu (highlighted in red below) can be changed to meet the website's requirement.

Use Markdown or HTML for the Menu

In md-CMS the website menu can be configured as list of HTML links in the Markdown format, stored in a .md file. Alternatively, the menu can be in HTML format as an unordered list, stored in a .txt file. Here is the Markdown file for the md-CMS menu as installed (see the figure above), showing the menu items as Markdown format links:

* [Home](/md/index "↓markdown↓ CMS Home")
* [README](/README "↓markdown↓ CMS README File")
* [License](/md/markdown-cms-license "↓markdown↓ CMS License")
* [Download](http://tekeye.uk/downloads/markdown-cms.zip "↓markdown↓ CMS Download Zip")
* [GitHub](https://github.com/GR8DAN/markdown-CMS "↓markdown↓ CMS on GitHub")
* [About](http://tekeye.uk/md_cms/about-markdown-cms "About ↓markdown↓ CMS")

To replace this default installed menu, create a similar format Markdown file in the home directory of the website called menu.main.md. If, for example, md-CMS was being used to create a website for cafe, then website menu might be configured using this Markdown file:

* [Home](/ "Our Home page")
* [Food](/food "Our delicious food choices")
* [Drinks](/drinks "Our choice of drinks")
* [Specials](/specials "The specials menu")
* [Location](/address "Where to find us")
* [About](/about "More cafe information")

When the above Markdown is stored in the menu.main.md file, the md-CMS based website creates menu items to link to the root index.md, and content files food.md, drinks.md, specials.md, location.md, address.md, and about.md:

The same menu can be created in HTML format, as an unordered list with anchor links, and stored in a menu.main.txt file in the home directory:

<ul>
    <li><a href="/" title="Our Home page">Home</a></li>
    <li><a href="/food" title="Our delicious food choices">Food</a></li>
    <li><a href="/drinks" title="Our choice of drinks">Drinks</a></li>
    <li><a href="/specials" title="The specials menu">Specials</a></li>
    <li><a href="/address" title="Where to find us">Location</a></li>
    <li><a href="/about" title="More cafe information">About</a></li>
</ul>

If both a Markdown menu.main.md file and a menu.main.txt file (for a HTML format menu) exist in the website home directory, then the text file version is used and the Markdown version is ignored.

Adding a Dropdown List to a Menu Item

Sometimes the website menu can be used to group different areas of content together. Web pages relevant to an area may be accessed via a dropdown menu. For the cafe example above, maybe there is a different specials page for food and drink:

For the HTML format menu, the menu items have an additional unordered list to create the dropdown. This nested list is added to the item that requires the dropdown:

<ul>
    <li><a href="/" title="Home page">Home</a></li>
    <li><a href="/food" title="Our delicious food choices">Food</a>
        <ul>
            <li><a href="/food/menu" title="Food Menu">Standard Menu</a></li>
            <li><a href="/food/specials" title="Food Specials">Specials Menu</a></li>
            <li><a href="/food/seasonal" title="Seasonal Food">Locally Sourced</a></li>
        </ul>
    </li>
    <li><a href="/drinks" title="Our choice of drinks">Drinks</a>
        <ul>
            <li><a href="/drink/everyday" title="Everyday Drinks">Popular Drinks</a></li>
            <li><a href="/drink/specials" title="Drink Specials">Specials</a></li>
        </ul>
    </li>
    <li><a href="/address" title="Where to find us">Location</a></li>
    <li><a href="/about" title="More cafe information">About</a></li>
</ul>

In the above menu, the index.md file in the food and drink directories can describe the overall offerings (also with links to the individual categories for accessibility). The defined dropdown menu will then link directly to the detailed pages, for example for the food dropdown: menu.md, specials.md and seasonal.md. For a nested list in the Markdown format, indent the additional items for the dropdown by four spaces:

* [Home](/ "Our Home page")
* [Food](/food "Our delicious food choices")
    * [Standard Menu](/food/menu "Food Menu")
    * [Specials Menu](/food/specials "Food Specials")
    * [Locally Source](/food/seasonal "Seasonal Food")
* [Drinks](/drinks "Our choice of drinks")
    * [Popular Drinks](/drink/everyday "Everyday Drinks")
    * [Today's Specials](/drink/specials "Drink Specials")
* [Location](/address "Where to find us")
* [About](/about "More cafe information")

The md-CMS menu only supports one level of nesting, as shown above.

Add a Dropdown Indicator

A named HTML entity character reference can be added to the menu text to indicate that it contains another dropdown. Useful predefined entities could be one of the following:

• ▽ - bigtriangledown
• ▾ - blacktriangledown
• ⊽ - barvee
• ↡ - Darr
• ⇓ - dArr
• ↓ - darr
• ⇓ - DoubleDownArrow
• ↓ - DownArrow
• ⇓ - Downarrow
• ↓ - downarrow
• ⤓ - DownArrowBar
• ↓ - ShortDownArrow
• ⋁ - Vee
• ∨ - vee
• ⊻ - veebar
• ▽ - xdtri

Here is the dArr entity added to the food and drinks menu items to indicate an additional dropdown menu. The HTML entity is added as ⇓, for example:

...
* [Food ⇓](/food "Our delicious food choices")
...

Or:

...
<li><a href="/food" title="Our delicious food choices">Food &dArr;</a>
...

Here is the dArr entity in use:

This article has shown how easy it is to defined a new menu, and optionally a dropdown menu, for a website that is built using md-CMS.

See Also

• There are more tutorials covering ↓markdown↓ CMS in the article Build a Website from Scratch with ↓markdown↓ CMS.
• View the Tek Eye full Index for other articles.