FearlessCMS - Fast and Fearless Content Management
Hero Banner

Menu Editor Guide

FearlessCMS Menu Editor Documentation

The Menu Editor in FearlessCMS allows you to create, edit, and organize navigation menus for your website. Menus are used in your theme templates wherever you place a {{menu=menuid}} tag (for example, {{menu=main}}).

Accessing the Menu Editor

  1. Log in to your FearlessCMS admin panel.
  2. In the top navigation, click Menus.

Menu Editor Overview

The Menu Editor page is divided into several sections:

  • Menu Selection: Choose which menu to edit (e.g., "main", "footer").
  • Menu Class: Set a CSS class for the <ul> element of the menu.
  • Menu Items List: View, reorder, edit, or delete menu items.
  • Add Menu Item: Add new links to your menu.
  • Save Menu: Save your changes.
  • Create New Menu: Add a new menu for use in your theme.

How to Use

1. Selecting a Menu

  • Use the dropdown at the top to select which menu you want to edit.
  • Menus that are referenced in your theme (e.g., {{menu=main}}) will appear here automatically.

2. Editing Menu Class

  • The Menu Class field lets you set a CSS class for the menu’s <ul> element.
  • This is useful for styling your navigation in your theme’s CSS.

3. Adding a Menu Item

  • Click Add Menu Item.
  • A new item will appear in the list and the edit dialog will open.
  • Fill in:
    • Label: The text shown in the menu.
    • URL: The link destination (e.g., /about or https://example.com).
    • CSS Class: (Optional) A class for the <li> element.
    • Target: (Optional) Choose _blank to open in a new tab.
  • Click Save in the dialog.

4. Editing or Deleting Items

  • Click Edit next to any item to change its details.
  • Click Delete to remove an item from the menu.

5. Reordering Items

  • Drag and drop items using the handle (↕) to change their order.

6. Saving the Menu

  • After making changes, click Save Menu to store your changes.

7. Creating a New Menu

  • Click Create New Menu.
  • Enter a unique Menu ID (e.g., footer) and a CSS class.
  • Click Create. The new menu will appear in the dropdown and can be edited like any other menu.

Using Menus in Your Theme

To display a menu in your theme, add the following tag in your template HTML:

{{menu=main}}

Replace main with the ID of the menu you want to display (e.g., footer).

Tips

  • Menus are global: Once created, a menu can be used in any theme template.
  • Theme integration: If your theme template uses a menu ID that doesn’t exist yet, it will be auto-detected and available for editing.
  • Menu items can link anywhere: Use relative URLs for internal pages (e.g., /about) or full URLs for external sites.

Troubleshooting

  • Menu not showing up?
    • Make sure your theme template includes the correct {{menu=menuid}} tag.
    • Ensure the menu has at least one item and is saved.
  • Changes not appearing?
    • Try refreshing your site and clearing your browser cache.

Advanced

  • Multiple Menus: You can create as many menus as you need (e.g., main navigation, footer links, sidebar menus).
  • Custom Classes: Use the CSS class fields to style menus and items differently in your theme.

If you have further questions, consult the FearlessCMS documentation or ask your developer!

Happy editing!