• OVERVIEW
• PREREQUISITES
• How the pieces fit together
• Configure Theme Manager
• Build the Mega Menu navigation list
• Build the Footer lists
• Share navigation across sites
• Troubleshooting

OVERVIEW

Use this article to configure the site-wide Bonzai 2 experience: Theme Manager for colors and branding, Mega Menu for header navigation, and Footer for bottom-page navigation and optional feedback. Mega Menu and Footer are SharePoint Framework Application Customizers, not page web parts. After activation, they run across the site. Theme Manager is a web part that stores the branding and navigation-source settings those extensions use.

Why this matters: Page web parts live only where an editor places them. Application Customizers run in SharePoint placeholders on every page in the site collection. That is why Mega Menu and Footer must be activated through the Bonzai app, while Theme Manager is placed on a page for configuration.

PREREQUISITES

• Bonzai 2 is uploaded to the tenant App Catalog and added to the target site.
• You can edit the page where Theme Manager will be placed.
• You can create the MegaMenuNavigation and FooterNavigation lists on the site (the FooterFeedback list is automatically created upon the first feedback submission).
• You can publish the page after saving theme settings.

How the pieces fit together

Component	Type	Where it is configured	What it controls
Theme Manager	Web part	Place it on a page, usually the homepage or an admin page.	Core colors, dark mode, Mega Menu branding, Footer branding, Slider overlay colors, layout fixes, and Navigation Source Site URL.
Mega Menu	Application Customizer	Activated when the Bonzai app is added to the site; data comes from MegaMenuNavigation.	Header navigation, mobile drawer, optional search bar, breadcrumb behavior, and license banner display.
Footer	Application Customizer	Activated when the Bonzai app is added to the site; data comes from FooterNavigation and optionally FooterFeedback.	Footer navigation columns, footer branding, optional feedback form, and optional feedback redirect button.

Why this works: Theme Manager writes the theme to browser storage and, when site-wide persistence is enabled, to a hidden BonzaiTheme list. Mega Menu and Footer read the saved theme and their navigation lists when pages load.

Configure Theme Manager

1. Edit the homepage or a dedicated administration page.
2. Add the Bonzai Theme Manager web part.
3. Open the property pane and keep Show in Edit Mode Only on if regular visitors should not see the theming controls.
4. Keep Save theme for all users on this site on when the settings should persist site-wide. The first site-wide save can require Site Owner permissions because the hidden BonzaiTheme list may need to be created.
5. Use the on-page Theme Manager UI to set Primary, Background, Text, and Accent colors.
6. Configure Mega Menu Branding: background, text, hover background, hover text, optional logo URL, navigation bar spacing, dropdown panel spacing, breadcrumb visibility/alignment/inset, optional search bar, and page layout fix.
7. Configure Footer Branding: background, text, optional logo URL and logo size, section title styling, column separators, feedback description color, feedback visibility, feedback textarea height, and optional redirect button.
8. Configure Slider Branding if your site uses the Slider web part.
9. Select Save Theme, publish the page, and hard-refresh a page that contains Bonzai components.

Why this works: Bonzai 2 uses CSS Custom Properties for branding. Theme changes can preview immediately because the page updates variables in the browser instead of waiting for a separate CDN theme publish.

Build the Mega Menu navigation list

Create a SharePoint list named MegaMenuNavigation unless your extension properties specify a different list name.

Column	Type	Required	Purpose
Title	Single line of text	Yes	Display text for the menu item.
URL	Hyperlink or Text	Recommended	Navigation destination. Missing URLs resolve to #.
Parent	Lookup to the same list	No	Creates Level 2 and Level 3 hierarchy. Root items leave Parent blank.
SortOrder	Number	Recommended	Controls display order. Use increments of 10 so new items can be inserted later.
OpenInNewTab	Yes/No	No	Opens a link in a new tab where supported.
Icon	Single line of text	No	Fluent UI icon name such as Home or People.
IsEnabled	Yes/No	No	Shows or hides an item without deleting it.

1. Create Level 1 items first. Leave Parent empty.
2. Create Level 2 items and choose the related Level 1 item in Parent.
3. Create Level 3 items only when necessary and choose the Level 2 item in Parent.
4. Keep the hierarchy to three levels. Deeper nesting is not part of the Mega Menu behavior.
5. Test desktop and mobile layouts. Desktop uses a horizontal menu and panels; mobile uses a hamburger drawer.

Why this works: Mega Menu builds the navigation tree from the list relationships. The Parent lookup tells it which items are children, and SortOrder tells it where each item belongs inside its level.

Build the Footer list

Create a SharePoint list named FooterNavigation for footer links, feedback configuration, and optional meta text (Note: Copyright meta and feedback settings are stored in this same list).

Column	Type	Required	Purpose
Title	Single line of text	Yes	Link text or meta label.
Section	Single line of text	No	Column heading for grouped footer links.
SectionOrder	Number	No	Sort order for footer sections. Use the same value for all links in one section.
LinkOrder	Number	No	Sort order for links within a section.
Url	Hyperlink	No	Destination for Link items.
OpenInNewTab	Yes/No	No	Opens the link in a new tab where supported.
ItemType	Choice	No	Use Link, Feedback, or Meta.
Description	Multiple lines of text	No	Feedback help text or footer meta text.
ButtonText	Single line of text	No	Label for the feedback submit or redirect button.
ButtonUrl	Hyperlink	No	Optional feedback redirect destination.

Item types: Link items render as footer links grouped by Section. A Feedback item renders the feedback column; its Description appears above the input and ButtonText labels the submit button. A Meta item renders footer meta text, such as copyright text; if no Meta item exists, Footer falls back to a default copyright string.

Feedback storage: Footer feedback writes to a FooterFeedback list on the current site. The extension can auto-create this list on first submission; if creation fails because of permissions, ask a site owner to create the list manually. The list stores the submitted text, page URL, page title, submitter name, and submitter email.

Why this matters: Footer navigation and footer feedback are intentionally separate. A shared navigation source can centralize footer links, while feedback remains local so each site can collect its own submissions.

Note: Footer intentionally does not render on SharePoint system surfaces such as Site Contents and modern list or library administration pages. This prevents the footer from interfering with SharePoint administrative screens.

Share navigation across sites

Automatic Subsite Fallback: Within the same site collection, subsites automatically inherit the Mega Menu and Footer lists from the root site (`/`) if they don't have local lists. You only need explicit "Navigation Source Site URL" configuration if sharing navigation across different site collections.

1. Create and populate MegaMenuNavigation and FooterNavigation on the root or source site.
2. Add Theme Manager to the root site and save the theme with Navigation Source Site URL empty. Empty means “use this site.”
3. On each subsite, add Theme Manager and enter the root site URL in Navigation Source Site URL.
4. Tab out of the field and wait for validation. Theme Manager checks that the source site is reachable and that the expected navigation lists exist.
5. Save the theme on each subsite.

Why this works: Navigation Source changes where Mega Menu and Footer fetch their list data. It does not automatically copy the source site's colors, so you can centralize navigation while keeping each site’s theme independent.

Troubleshooting

Symptom	What to check	Why it matters
Theme changes disappear after reload	Confirm Save Theme was selected and Save theme for all users on this site is on.	Unsaved preview changes only affect the current editing session. Site-wide persistence stores the theme for other users and browsers.
Theme Manager is visible to visitors	Turn on Show in Edit Mode Only in the property pane.	Theme Manager is an editor tool; most sites should hide it from read-mode visitors.
Mega Menu does not show new items immediately	Wait up to five minutes or hard-refresh after changing MegaMenuNavigation.	Mega Menu caches navigation data for performance.
Mega Menu hierarchy is wrong	Check Parent values and SortOrder values. Ensure Level 1 items have no parent and Level 3 items point to Level 2 items.	The navigation tree is built from Parent relationships; incorrect parents create incorrect nesting.
Shared navigation source fails validation	Confirm the URL starts with https://, the current editor can access the source site, and the expected lists exist there.	Theme Manager validates the source before saving so the extensions do not point at a missing or inaccessible list.
Footer feedback is not recorded	Confirm the site has a FooterFeedback list or use the feedback redirect button.	Feedback submissions need a destination; navigation sharing does not move feedback storage to the source site.

If tenant policy blocks adding the Bonzai app and you need to use Tenant Wide Extensions manually, register the customizers in the App Catalog's **Tenant Wide Extensions** list with the following properties:

• Bonzai Mega Menu
  • Component Id: a1b2c3d4-e5f6-7890-abcd-ef1234567890
  • Location: ClientSideExtension.ApplicationCustomizer
  • Component Properties:

    {
    "navigationListName":"MegaMenuNavigation",
    "hideNativeNavigation":true,
    "hideMobileAppBar":true,
    "showBreadcrumb":true,
    "licenseApiUrl":""
    }

• Bonzai Footer
  • Component Id: b6c8c5d2-2a6d-4f44-9d67-2b9a9a3b9f42
  • Location: ClientSideExtension.ApplicationCustomizer
  • Component Properties:

    {
    "footerListName":"FooterNavigation",
    "feedbackListName":"FooterFeedback"
    }