Manage navigation menus

A menu is an ordered list of links. Your site's top navigation bar is the main menu, and you can add more menus, such as a footer menu, and show them wherever you like. You manage them under Menus, with no code.

What you need

• To view menus you need access to the admin. To create, edit, reorder or delete them you need the Manage Content Types permission. Without it you see the menus but not the buttons.
• The address of each page you want to link to. For a site page, that is its route path with a leading slash, such as /about.

See your menus

In the sidebar, under Content, click Menus. The list has the columns Label, Developer name and Main. A fresh install has one menu, whose developer name is mainmenu and which carries the Main badge. It contains three items: Home (/home), About (/about) and Posts (/posts).

Add a link to a menu

1. Click the menu's label to open it.
2. Click New item.
3. Type the Label: the words visitors see.
4. Type the URL: where the link goes, for example /contact or https://example.com.
5. Click Create.

You return to the menu, where the new item appears at the end of its level, and the notice Menu item created is shown. Load your public site: if the menu is the main menu and the theme's header is unchanged, the link now appears in the navigation bar.

Item settings

Setting	What it does
Label (required)	The link text.
URL (required)	The link target. Raytha stores it as you type it and hands it to the template unchanged.
CSS class	A class name your template can add to the link or its list item, for styling, for example a button look for a "Sign up" link.
Parent	Top level, or another item in the same menu. Choosing a parent makes this item a child.
Disabled	Marks the item as off. It is a flag for templates to check; see Gotchas.
Open in new tab	Marks the link to open in a new browser tab. It is a flag for templates to act on; see Gotchas.

Nest items under a parent

To make a drop-down group, add children to an item:

1. Open the menu.
2. On the parent's row, click Add child. The new-item form opens with Parent already chosen.
3. Fill in Label and URL, then click Create.

Children are shown indented under their parent. To move an existing item under a different parent, open it and change Parent, then click Save. The list of parents leaves out the item itself and everything nested under it, so you cannot create a loop.

Raytha does not limit how deep you nest. How many levels show on the site depends on your template, and the standard Bootstrap navigation bar handles one level of drop-down.

Reorder items

Each row has a grip handle on its left. Drag the handle up or down to change the order. You can also focus the handle with the keyboard and use the arrow keys.

• Reordering works among siblings, that is, items with the same parent. Dropping an item onto one with a different parent does nothing.
• To change an item's level, change its Parent instead.

Choose the main menu

Exactly one menu is the main menu. It is the one the built-in header shows. To change it, open the menu you want and click Set as main menu. You see Main menu updated, and the previous main menu loses its badge. The button is not shown on the menu that is already the main one.

Create another menu

1. On the Menus list, click New menu.
2. Type a Label, for example Footer. The Developer name fills itself in from the label.
3. Change the developer name if you want a different one. Templates refer to the menu by this name.
4. Click Create, and then add items as above.

A developer name must be unique. Raytha reports an error if another menu already uses it.

Show a menu in a template

A new menu does not appear on the site by itself. Your template must print it. The main menu has its own function, and any other menu is fetched by developer name:

{% assign footerMenu = get_menu("footer") %}
{% if footerMenu %}
  <ul>
    {% for menuItem in footerMenu.MenuItems %}
      {% unless menuItem.IsDisabled %}
        <li class="{{ menuItem.CssClassName }}">
          <a href="{{ menuItem.Url }}"{% if menuItem.OpenInNewTab %} target="_blank" rel="noopener"{% endif %}>{{ menuItem.Label }}</a>
        </li>
      {% endunless %}
    {% endfor %}
  </ul>
{% endif %}

get_menu returns nothing when no menu has that developer name, which is why the example checks {% if footerMenu %}. Each item gives you Label, Url, CssClassName, OpenInNewTab, IsDisabled, IsFirstItem, IsLastItem and MenuItems (its children). For a drop-down, loop over menuItem.MenuItems inside the loop:

{% for menuItem in get_main_menu().MenuItems %}
  <li>
    <a href="{{ menuItem.Url }}">{{ menuItem.Label }}</a>
    {% if menuItem.MenuItems.size > 0 %}
      <ul>
        {% for child in menuItem.MenuItems %}
          <li><a href="{{ child.Url }}">{{ child.Label }}</a></li>
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endfor %}

Edit the layout on your theme's Web templates tab; see Overview of the built-in templates for which template holds the header, and How Liquid templates work in Raytha for the syntax.

Edit or delete items and menus

• Edit an item: click its label, change the fields, click Save.
• Delete an item: open it and click Delete menu item in the red area at the bottom, then confirm. Items nested under it are deleted too, and the confirmation tells you how many.
• Delete a menu: open it and click Delete menu, then confirm. All its items go with it. Templates that print the deleted menu show nothing.

Gotchas

• The built-in header does not use every setting. It draws only the top-level items of the main menu. It ignores children, Open in new tab, CSS class and Disabled. If you set these and see no effect, edit the layout; the snippets above show how.
• "Disabled" does not hide anything by itself. Raytha passes the flag to the template. Check IsDisabled as in the example if you want disabled items hidden.
• The main menu cannot be deleted. Make another menu the main one first.
• The seeded Home link goes to /home, not /. That works while the site page with the path home exists. If you rename that page, update the menu item. Use / if you want the link to follow whichever page is the home page.
• Menus are not pages. Adding a menu item does not create a page, and deleting a page does not remove its menu item, so a menu can point at an address that returns "not found".
• Menus have no draft state. Changes are visible on the public site as soon as you save.
• You cannot rename a menu in the admin. Choose its label and developer name carefully when you create it.

Next steps

• Site pages and the page builder
• Themes and web templates
• How Liquid templates work in Raytha