1. Go to Extensions > Manage > Install.
2. Upload the module ZIP.
3. After install, go to Extensions > Modules and search “Wyldcode Visual Sitemap”.
4. Pick a position, menu assignment, and a Layout Style (Vertical, Horizontal, Cards, Accordion, Journey).
5. Save & view.

Notes

• The module’s name/description in the installer UI come from /administrator/language/en-GB/en-GB.mod_wyldvsitemap.sys.ini.
• The in-module field labels come from /language/en-GB/en-GB.mod_wyldvsitemap.ini.

We collect all valid URLs in the chosen Menu Type, including children (excluding separators/headings and the active page).

It never pulls from other menus (e.g., Footer) unless that menu is selected in the module parameter.

Toggle via Enable Surprise Me Button.

Common causes when the Card Grid looks "short".

• Menu Type: Make sure the module is pointed at the right menu.
• Menu item state: Unpublished or restricted (Access Level) items won’t render.
• Separators/Headings: These show as non-click titles (or may be skipped depending on your template).
• Aliases: Aliases render, but if the target is unpublished/inaccessible, it’s skipped.
• Active page: The current active menu item URL is de-duplicated for "Surprise Me", but it still renders as a card.
• Clear System cache if the menu was just edited.

Control the icon shown on each card.

Options

• Per-item: In the menu item’s parameters, set Link Image / Menu Image.
• Global fallback: In the module, set Default Card Icon if Menu Link Image not set.
• SVGs are supported and look crisp at any size.

The border radius field accepts CSS units, but we cap it for safety.

• The module validates and clamps the value to a maximum of 30px internally.
• Accepts px, em, rem, %. If invalid, it falls back to 0px.
• The radius is applied consistently to cards, list items, and badges.

Quickly make things match your brand without breaking contrast.

Tips

• Parent colours = top-level items / card fronts.
• Child colours = children / card backs.
• Hover colours = link hover & accents.
• Aim for at least 4.5:1 contrast for body text.
• If hover colours look too subtle, bump Hover Text Colour first.

Customize frontend text via Joomla Language Overrides.

Keys you may want to override

• MOD_WYLDVSITEMAP_SURPRISEME = “Surprise Me”
• MOD_WYLDVSITEMAP_VIEW = “View Page”
• MOD_WYLDVSITEMAP_VIEW_NAMED = “View %s”

Steps

1. Go to System > Language Overrides.
2. Choose language/site, click New.
3. Key = the string above, Text = your custom label.
4. Save & clear cache.

Safely customize markup and styles.

Overrides

• Copy the layout you want from
  /modules/mod_wyldvsitemap/tmpl/<layout>.php
  to
  /templates/your_template/html/mod_wyldvsitemap/<layout>.php.

CSS hooks

• Root wrapper classes:
  • .wyldcode-visual-sitemap.vertical
  • .wyldcode-visual-sitemap.cards
  • .wyldcode-visual-sitemap.accordion
  • .wyldcode-visual-sitemap.horizontal
  • .wyldcode-visual-sitemap.journey
• CSS variables:
  • --wyld-border-radius
• Colours come from params; you can still override in your template CSS.

Built-in support for reduced motion and keyboard users.

• On devices with prefers-reduced-motion: reduce, we avoid confetti and keep transitions minimal.
• Use descriptive Link Image alt text for icons.

Yes, you can publish multiple instances.

1. Duplicate the module in Extensions > Modules.
2. Point each instance at a different Menu Type or choose different Layout Styles.
3. Use Menu Assignment to place each instance on specific pages.