ABC Menu is a HumHub module for creating and managing more flexible navigation structures than the standard HumHub menu system normally provides. It is designed for platforms that need custom menus, nested navigation, footer menus, and clearer user journeys.

The module is especially useful for larger HumHub installations, directory platforms, partner portals, school networks, church networks, tourism platforms, and community hubs where many modules, spaces, pages, and external resources need to be organized in a clean way.

ABC Menu can help administrators build custom main menu items, submenu structures, links to internal or external pages, and special navigation areas. It is intended to make important functions easier to find and reduce confusion when a platform grows beyond a simple community layout.

Within the ABC Suite ecosystem, ABC Menu supports the goal of turning HumHub into a more complete portal framework. It can help integrate standard HumHub sections, ABC Suite modules, directory pages, maps, events, marketplace areas, and information pages into one coherent navigation experience.

Accessibility and usability are central goals. Navigation should remain understandable, keyboard-friendly, mobile-friendly, and suitable for international communities.

See it in Action at Phuketer.com

Changelog:

Fixed/changed in abcmenu-v26.05.16.4

• Level 3 and deeper menu entries should now render in the frontend.
• Added explicit level classes/data attributes for dropdown items.
• Kept the existing maxDepth setting working, up to 6 levels.
• Desktop flyouts now check the viewport:
  • default opens to the right;
  • if it would go outside the visible page, it opens to the left.
• Mobile nested menus stay as accordion-style scrollable lists.
• Hardened the open-state handling so deeper levels use the same abcmenu-is-open class consistently.

What changed in abcmenu-v26.05.16.3

•  Added dynamic discovery of HumHub top menu entries.
• Newly installed/enabled modules that add their own main menu item should now appear in the ABC Menu config after the config page is reloaded.
• Removed the dependency on the fixed hardcoded list.
• Existing hidden menu selections are preserved.
• If a module is later disabled or temporarily not detected, the hidden setting is kept and shown as “currently not detected” instead of being deleted.
• Entries are stored by stable menu ID when available, for example dashboard, people, spaces.
• If a third-party module does not provide a menu ID, ABC Menu generates a fallback key from its URL/class so it can still be hidden.

ABC Menu – Multilingual Menu Builder for HumHub

ABC Menu is a flexible menu and navigation builder for HumHub. It lets administrators create their own main menu, directory-style dropdowns, multilingual navigation, footer links, and mobile-friendly nested menus without editing HumHub core files.

It is designed especially for communities, NGOs, schools, churches, directories, associations, and multilingual platforms where the normal “one fixed menu for everyone” approach is simply not enough anymore.

ABC Menu can replace, extend, or reorganize the standard HumHub top navigation and can connect directly with ABC Categories when installed, so category colors and visual identity can be reused automatically.

1. Installation

Upload the module folder to:

protected/modules/abcmenu

Please make sure the structure is correct:

protected/modules/abcmenu/Module.php
protected/modules/abcmenu/config.php
protected/modules/abcmenu/module.json

It should not be uploaded one folder too deep, for example:

protected/modules/abcmenu/abcmenu/Module.php

After uploading, run:

php protected/yii module/scan
php protected/yii migrate/up --migrationPath=@abc/modules/abcmenu/migrations --interactive=0
php protected/yii cache/flush-all
rm -rf assets/*

Then go to:

Administration → Modules

Enable ABC Menu.

2. What ABC Menu does

ABC Menu lets you build your own HumHub navigation structure.

You can create:

• top menus

• dropdown menus

• multi-level directory menus

• mobile-friendly menus

• footer menus

• menu items with icons

• translated menu labels

• menus that reuse ABC Categories colors

• menus that replace or hide default HumHub menu items

It is especially useful when your HumHub installation becomes more than a small social network and starts turning into a real community portal, directory, intranet, NGO platform, school platform, church platform, local information system, or even a lightweight CMS-style website.

In short: ABC Menu gives HumHub a proper navigation brain.

3. First setup

After enabling the module, open:

Administration → Modules → ABC Menu → Configure

There you can define how ABC Menu appears in the frontend.

Important settings are:

Auto-render menu

When enabled, ABC Menu automatically renders the selected menu globally.

Menu code

Usually this is:

main

The menu code connects the configured frontend output with the menu you create under Manage menus.

Maximum render depth

This controls how many nested levels are shown. For larger directory menus, values like 4 or 5 are useful.

Menu placement

You can choose how ABC Menu appears in HumHub.

Common options are:

HumHub top menu entries
Separate bar below topbar

For a normal replacement of HumHub’s main navigation, use HumHub top menu entries.

4. Hiding standard HumHub menu entries

ABC Menu can dynamically detect existing HumHub top menu entries.

This is important because modules can add their own main menu entries later. For example, Calendar, Meet, Games, Spaces Map, Classified Spaces, Members Map, Surveys, Ecommerce, or other installed modules may add their own top menu item.

ABC Menu lists those detected entries under:

Standard HumHub menu entries

You can then disable original HumHub/module entries when you recreate them inside ABC Menu.

Example:

You may hide the original:

Dashboard
People
Spaces
Calendar
Meet

and then create your own cleaner structure:

Home
Directory
People
Meet
Games

This avoids duplicate menu entries and gives you one controlled navigation structure.

Newly installed modules should appear in this list after the module is installed/enabled and the ABC Menu settings page is reloaded.

5. Creating a menu

Go to:

ABC Menu → Manage menus

Click:

Create menu

Recommended default menu:

Code: main
Name: Main Menu
Description: Default ABC Menu
Active: Yes

The main code is important if your global ABC Menu settings use main as the frontend menu code.

After creating the menu, click:

Items

Now you can start building the menu tree.

6. Creating menu items

In the menu item manager, you can add:

Add main item
Add child

Each menu item can have:

• title

• URL

• icon

• sort order

• active/inactive status

• parent item

• translations

• optional ABC Category color source

• optional manual color overrides

You can create simple menus like:

Home
Spaces
People
Calendar
Meet

or complex directory menus like:

Directory
  A - Airlines, Airports, Airways
  B - Business
  C - Churches, Mosques, Temples
  D - Doctors, Clinics, Hospitals
  E - Education
    0 - 6 Years Early Childhood
      01 - Phuket Private Nurseries
      02 - Phuket Private Kindergartens
      03 - Phuket Public Nurseries

This makes ABC Menu useful not only as a menu builder, but also as a structured directory navigation system.

7. Drag and drop sorting

ABC Menu includes drag-and-drop sorting.

You can move items up and down, reorder them, and create nested structures by moving items below other items.

This makes it possible to build large directory-style menus without manually entering sort numbers for every item.

For example, you can build:

Directory
  Education
    Early Childhood
      Private Nurseries
      Private Kindergartens
      Public Nurseries

and then move items around visually.

That is much easier than telling a volunteer admin: “Please update sort order 10, 20, 30, 40 and do not forget the parent ID.”

Nobody wants that. Not even on a good coffee day.

8. Icons

Each menu item can use an icon.

ABC Menu supports icon selection for menu entries, so your frontend navigation can show clear visual markers.

For example:

Home → house icon
Directory → sitemap icon
People → users icon
Meet → video icon
Education → graduation cap icon
Travel → airplane icon

If an icon was selected by mistake, it can also be reset to:

No icon

That means you are not forced to keep an icon forever after one was selected.

9. Multilingual menu support

This is one of the most important features.

Most real societies are no longer monolingual. Schools, NGOs, churches, local communities, international directories, and social platforms often need to speak to people in several languages.

ABC Menu supports translated menu labels.

The module uses the HumHub language system and allows translated values for menu content. If a translation is empty, ABC Menu falls back to the default/original language.

So you can safely start with English and later add Thai, German, Russian, French, Chinese, Arabic, Spanish, or other languages supported by your HumHub installation.

No translation? No problem. The original text still appears.

10. Google Translate helper without API costs

Professional translation services can become expensive quickly, especially for NGOs, small schools, local associations, churches, volunteer projects, and community platforms.

ABC Menu therefore includes a practical low-cost workflow:

1. Create the original menu item in English.

2. Choose the target language.

3. Click:

Translate EN with Google

4. Google Translate opens with the English source text.

5. Review the translation.

6. Copy the translation from Google Translate.

7. Return to HumHub.

8. Paste the translation into the target language field.

9. Save.

This does not require a Google API key.

It does not create monthly translation costs.

It does not silently auto-translate and save questionable text.

It keeps the human in control.

That means your organization can use free tools, human review, and common sense. This is slower than a paid automatic API system, but for many NGOs and community projects it is exactly the right balance: low cost, understandable, and safe.

Or said differently:
ABC Menu lets you spend money on people and projects instead of monthly translation bills.

11. Translation workflow example

Example English menu item:

E - Education

For Thai:

1. Open the item.

2. Choose Thai in the translation section.

3. Click Translate EN with Google.

4. Google Translate opens.

5. Copy the Thai result.

6. Paste it into the Thai translation field.

7. Save.

For German:

1. Choose German.

2. Click Translate EN with Google.

3. Copy the German result.

4. Paste.

5. Save.

For French, Russian, Chinese, Arabic, Spanish, and other installed HumHub languages, the workflow is the same.

The translation language list is sorted A-Z, so it is easier to find the language you need.

12. Mobile-friendly navigation

ABC Menu is designed for desktop and mobile.

On desktop, menu items can open as dropdowns and flyout menus.

On mobile, nested menu levels become easier to use as stacked, scrollable menu panels. This avoids the usual nightmare where small-screen dropdowns fly outside the screen and nobody can click anything properly.

The mobile menu is designed to stay above bottom navigation icons, so menu panels do not cover the buttons that open them.

This is especially important when using footer-style mobile navigation.

13. Deep nested menus

ABC Menu supports multiple levels.

For example:

Directory
  Education
    Early Childhood
      Private Nurseries
      Private Kindergartens
      Public Nurseries

The maximum depth is controlled in the settings:

Maximum render depth

A value like 4 or 5 is useful for larger directories.

Desktop flyouts are designed to check available screen space. If a submenu cannot safely open to the right, it can open to the left instead.

Mobile users get a more touch-friendly nested list behavior.

14. ABC Categories integration

ABC Menu can work together with ABC Categories.

This is especially useful for directory platforms.

In ABC Categories, each category can have visual color values such as:

Custom border color
Custom background color
Custom left border color
Custom right border color

Example values:

Custom border color: #008000
Custom background color: #ffffff
Custom left border color: #008000
Custom right border color: #008000

ABC Menu can reuse those same values.

That means you do not need to redefine the same colors again manually in ABC Menu.

15. How the ABC Categories color connection works

When ABC Categories is installed, ABC Menu item forms can show:

ABC Category color source

There you can select an existing ABC Category.

ABC Menu then pulls the colors from that category and applies them to the menu item.

So if your ABC Category for:

Education

has a green border and white background, the ABC Menu item connected to Education can use the same visual style.

This keeps your platform consistent.

Your category cards, category browser, and menu navigation can all share the same visual identity.

16. Manual color overrides

ABC Menu also allows manual color values.

This is useful if:

• ABC Categories is not installed

• a menu item is not connected to a category

• you want one menu item to look slightly different

• you need a temporary campaign menu item

• you want to highlight a special section

Manual fields include:

Custom border color
Custom background color
Custom left border color
Custom right border color

The priority is:

Manual ABC Menu color
→ selected ABC Category color
→ global/default styling

So manual overrides win, but if they are empty, ABC Menu uses the category values.

17. Example: building a directory menu with ABC Categories

Imagine your ABC Categories contain:

A - Airlines, Airports, Airways
B - Business
C - Churches, Mosques, Temples
D - Doctors, Clinics, Hospitals
E - Education
R - Recycle, Reduce, Reuse
T - Transport, Taxi, Travel

In ABC Menu you can create:

Directory
  A - Airlines, Airports, Airways
  B - Business
  C - Churches, Mosques, Temples
  D - Doctors, Clinics, Hospitals
  E - Education
  R - Recycle, Reduce, Reuse
  T - Transport, Taxi, Travel

Then you connect each menu item to the matching ABC Category.

The menu now uses the same colors as the category browser.

That gives users a consistent visual experience across the site.

They do not need to learn one color system in the directory and another color system in the menu.

18. URLs and links

Each ABC Menu item can link to a URL.

Examples:

/
 /dashboard
 /people
 /spaces
 /calendar
 /games
 /classified-space/browse
 /abccat/category/view?id=123

You can link to:

• HumHub pages

• module pages

• category pages

• space pages

• user pages

• external URLs

• custom routes

For directory use, it is best to link category menu items directly to the real category URL, ideally with a stable category ID or slug.

That makes the ABC Categories color matching and menu behavior more reliable.

19. Import and export

ABC Menu supports JSON import and export.

This is useful when you want to:

• move a menu from staging to production

• back up a menu

• duplicate a menu structure

• create a starter menu for another HumHub installation

• share a menu setup between projects

The import screen accepts JSON exported from ABC Menu.

Existing menus are not overwritten automatically. Imported menus receive a new code if needed.

This is safer than “oops, we imported and destroyed the live navigation.”

20. Why this is useful for NGOs and organizations

Many NGOs, schools, churches, and community projects do not have large technical teams.

They often need:

• multilingual navigation

• easy editing

• no monthly API cost

• simple copy/paste workflows

• mobile-friendly menus

• directory structures

• clear icons

• flexible colors

• volunteer-friendly administration

ABC Menu is built exactly for that kind of real-world use.

A volunteer can translate menu items manually with Google Translate.
An admin can review and correct the wording.
A local team member can improve the language later.
The organization keeps control of its content.

It is not magic.
It is better: it is understandable.

21. Recommended workflow for a multilingual directory

A good practical workflow is:

1. Create the English menu structure first.

2. Connect menu items to ABC Categories where possible.

3. Check the frontend menu on desktop.

4. Check the mobile menu.

5. Add translations language by language.

6. Use the Google Translate helper for first drafts.

7. Ask native speakers or local team members to improve important labels.

8. Hide original HumHub menu entries that are now replaced by ABC Menu.

9. Export the finished menu as JSON backup.

This gives you a clean, structured, multilingual navigation system.

22. ABC Menu and future ABC Pages

ABC Menu is now focused on navigation only.

The page/CMS part is being separated into ABC Pages, which can later become a stronger page, news, blog, and CMS-style system.

This keeps the architecture clean:

ABC Menu  = navigation
ABC Pages = pages, articles, CMS content
ABC Cat   = categories and directory structures

This separation is important.

A menu builder should not become messy by trying to be a full CMS inside the same module.

ABC Menu creates the navigation structure.
ABC Pages can later create the content.
ABC Categories can provide directory logic and colors.

Together, they can become a powerful HumHub-based website and community system.

23. Typical use cases

ABC Menu can be used for:

• community portals

• school directories

• NGO platforms

• church networks

• local city portals

• multilingual intranets

• public information maps

• member directories

• educational platforms

• social community websites

• directory-style HumHub installations

• mobile-first navigation systems

It is especially useful when the site has more than a few menu links and needs a proper information structure.

24. Summary

ABC Menu turns HumHub navigation into a flexible, multilingual, mobile-friendly menu system.

It supports:

• custom main menus

• nested dropdowns

• mobile-friendly navigation

• dynamic hiding of standard HumHub menu entries

• icons

• JSON import/export

• manual translations

• Google Translate helper links

• fallback to default language

• ABC Categories color reuse

• manual color overrides

• directory-style menu structures

It is built for real communities, real multilingual societies, and real organizations that need strong navigation without expensive monthly translation tools or hardcoded core modifications.

ABC Menu helps HumHub become easier to navigate, easier to translate, and easier to turn into a real community website.