Skip to main content
On this page

Dropdown Menu & Highlight Badges Header Configuration Guide

The TanaFlows theme supports creating Dropdown Menus and adding Highlight Badges (such as HOT, NEW, FREE) to the navigation bar in a clean and smart way directly from Ghost Admin, without modifying any code.

1. Creating Dropdown Menus

To group menu items into a dropdown, use a naming convention with a hyphen - in Ghost’s Navigation settings.

Configuration Rules:

  1. Parent Menu Item: Type the name normally (without a leading -).
  2. Child Menu Item: Start the name with a hyphen - (e.g., - Child Item Name).
  3. Ordering: Place all Child Menu Items directly below their respective Parent Menu Item in the list.

Real-World Example in Ghost Admin:

Under Ghost Admin > Settings > Navigation, configure the navigation list as follows:

  • Courses (Link: /courses/) ← Parent Item
  • - Web Development (Link: /tag/web-dev/) ← Child Item 1
  • - UI/UX Design (Link: /tag/ui-ux/) ← Child Item 2
  • Blog (Link: /blog/) ← Another Parent Item (displays normally)

Result on your Website:

  • The Courses item will automatically display a dropdown arrow icon.
  • When users hover over it (on desktop) or tap it (on mobile), a dropdown menu will appear containing two options: Web Development and UI/UX Design (the leading hyphen - is automatically hidden).
  • The parent menu’s original link (/courses/) is automatically intercepted to toggle the dropdown.

2. Creating Highlight Badges next to Menu Items

You can add prominent badges like NEW, HOT, or FREE next to any navigation link (applies to both Parent and Child menu items) to attract readers’ attention.

Configuration Rules:

Use a vertical bar | in the navigation Label field in Ghost Admin with the following format: Menu_Item_Name|Badge_Text

Real-World Examples in Ghost Admin:

  • For regular Menu Items: Products|NEW
    • Result: Displays Products with a small, colored NEW badge next to it.
  • For Child Menu Items in Dropdowns: - Flutter Course|HOT
    • Result: Displays inside the dropdown as Flutter Course with a HOT badge next to it.

3. Important Considerations

Ordering Child Items

Make sure that Child Menu Items (starting with -) are always placed immediately below their corresponding Parent Menu Item in Ghost Admin. If they are separated by other items, they will not be grouped correctly.

Hyphen Syntax

The hyphen - must be the very first character of the menu label. The space after the hyphen is optional (e.g., both -Course and - Course are accepted).

Testing Changes

After saving changes in Ghost Admin, simply reload your website to view the updated header menu.