Mega Menu

Admin-Blocked Apps Workaround

If “Apps you can add” is empty due to tenant policy, you can still activate Mega Menu by registering the Application Customizer in the Tenant Wide Extensions list.

1. Open the App Catalog site: https://<tenant>.sharepoint.com/sites/appcatalog
2. Go to Site Contents → Tenant Wide Extensions
3. Click New → Application Customizer
4. Fill in the fields below and click Save

Title: Bonzai Mega Menu
Component Id: a1b2c3d4-e5f6-7890-abcd-ef1234567890
Location: ClientSideExtension.ApplicationCustomizer
Component Properties:
{"navigationListName":"MegaMenuNavigation","hideNativeNavigation":true,"hideMobileAppBar":true,"showBreadcrumb":true}
Sequence: 100 (optional)
Web Template / List Template / Host Properties: leave blank

Branding and Logo

• Mega Menu reserves a logo slot on the left for desktop and mobile layouts.
• The logo slot always links to the current site collection root (pageContext.site.absoluteUrl), even on subsites.
• Theme Manager → Mega Menu Branding exposes four dedicated color pickers:Background, Foreground, Hover Background, and Hover Foreground. Hover colors are independently configurable (not derived from the foreground color).
• Provide an absolute PNG logo URL in Theme Manager to display the logo.
• Spacing and breadcrumb controls (Theme Manager)
  • Navigation Bar Spacing: slider that adjusts padding on top-level nav items (50–150%, default 100%).
  • Dropdown Panel Spacing: separate slider for padding inside dropdown flyouts (50–150%, default 100%).
  • Breadcrumb controls: show/hide, left/center/right alignment, and an inset slider (0–40%) to push the breadcrumb inward responsively.
• Mega Menu search bar (Theme Manager)
  • Show Search Bar: toggle to enable a typeahead search box in the navigation bar.
  • Search Scope: dropdown to limit search to "Entire Tenant", "Current Site Only", or a "Specific Site" (selected from a picker).
  • Four filter tabs: results are split into All, Documents, People, and Locations tabs, each with a count badge next to the tab name.
  • Minimum query length: typeahead activates at 2+ characters; shorter queries show no dropdown. Input is debounced by 300 ms.
  • Hit highlighting: matching substrings in titles, descriptions, names, and emails are wrapped in <strong> tags for emphasis.
  • "Show all" footer link: pressing Enter (with no result focused) or clicking the footer navigates to /_layouts/15/search.aspx?q=<query> for the full results page.
  • Search results show friendly content type labels (e.g., "Word", "PDF", "Page", "Excel", "PowerPoint", "News", "Event", "Spotlight") instead of raw SharePoint content type names.
  • People search uses a multi-source fallback strategy: tries two SharePoint Search people result sources plus the default source, then falls back to Microsoft Graph /users if none return results. Graph results link to Delve profiles.
  • Keyboard navigation through search results with visible focus indicator (Arrow Up/Down to move, Enter to open, Escape to close).
  • Content exclusions: system files, images, CSS/JS, master pages, page layouts, web part pages, _catalogs, Style Library, Form Templates, SitePages/Templates, and infrastructure list types (STS_List_*, STS_Site, STS_Web) are automatically filtered from content results.
  • Snippet sanitization: result descriptions are cleaned of SharePoint internal metadata, field labels, STS_* tokens, and duplicate title text.
  • Clear button: an X button appears inside the search input to clear the query and refocus the input.
  • Loading spinner: replaces the search icon while the API call is in progress.
  • 8-second timeout: prevents hung searches from blocking the UI (results fall back silently to empty).
  • Configurable placeholder text: set custom search placeholder text in Theme Manager (max 50 characters).
  • Configurable quick results count: control how many results appear in the dropdown (3–10, default 5) via Theme Manager.
  • Accessibility: ARIA role="search"/listbox/option, aria-live screen-reader announcements of result counts, aria-activedescendant focus tracking, and a focus trap on the mobile overlay.
  • Result caching: search results are cached in-memory for 60 seconds (per query/scope/rowLimit) to speed up repeated and tab-switching queries.
  • Content-aware icons: results show file-type icons (Word, Excel, PDF, PowerPoint, OneNote, Mail, HTML, Image, etc.) or content-type icons (News, Event/Calendar, Spotlight/FavoriteStar). Items without a recognized type show an initial avatar.
  • Graph badge: people results sourced from Microsoft Graph display a "via directory" badge.
  • Draft exclusion: unpublished/draft pages are automatically filtered via -PromotedState:0.
  • Mobile search overlay: on mobile, tapping the search icon opens a full-width overlay positioned directly below the mega menu, with a Close button and Tab focus trap.

  Page Layout Fix (Theme Manager)

  Some SharePoint sites (especially CMSPUBLISHING subsites) display a persistent left sidebar or have left-aligned content when full-width sections are used. The Mega Menu includes a built-in page layout fix controlled by three toggles in Theme Manager:

  • Enable Page Layout Fix: master toggle (off by default — zero impact until enabled)
  • Hide Left Sidebar: hides the native SharePoint left navigation panel across all site template variations (standard Modern, CMSPUBLISHING subsites, and classic left nav)
  • Center Page Content: re-centers page content that full-width zones push to the left

  Replaces the standalone center-fix package

  This feature replaces the separate bonzai-center-fix SPFx package and per-site PowerShell scripts that were previously required. No extra package or PowerShell deployment is needed — just enable the toggle in Theme Manager.

Breadcrumb Behavior

When enabled, the breadcrumb renders just below the mega menu bar and reflects the current navigation context. It is built entirely from the SharePoint context — it does not read from the MegaMenuNavigation list.

• Site-collection ancestry: if the current page is on a subsite, the breadcrumb prepends the site-collection title and every intermediate subsite (each fetched via /_api/web?$select=Titleand cached per URL).
• Within-site path: after the ancestors, URL segments under the current web become breadcrumb links. System folders like SitePages, Pages, Forms, and _layouts are stripped; date prefixes (e.g., 2026-01-) are removed; and hyphens/underscores become spaces with title-casing.
• Current page label: uses pageContext.listItem.title when available, otherwise falls back to a slug-to-title conversion of the last URL segment.
• Home/welcome detection: on the site root, the configured welcome page, or common home paths (SitePages/Home.aspx, Pages/default.aspx, etc.), the breadcrumb renders only the site title (and collapses entirely when no ancestors exist).
• SPA navigation aware: listens for popstate and polls the URL every 500 ms so it updates on SharePoint's client-side transitions without a full reload.

Navigation Hierarchy

Mega Menu supports a 3-level navigation structure:

Desktop and Mobile Behavior

Required Navigation List

Mega Menu reads navigation items from a SharePoint list. The default list name is MegaMenuNavigation, but this can be configured in the extension properties.

List Schema

Common Configurations

Example navigation structures:

Best Practices

Multi-Site Deployments (Shared Navigation)

If you have multiple sites or subsites that should share the same Mega Menu, you do not need to create a MegaMenuNavigation list on each subsite. There are two mechanisms that cooperate here:

1. Automatic fallback to the site collection root. If the MegaMenuNavigation list does not exist on the current subsite, the Navigation Service transparently retries the request against pageContext.site.absoluteUrl (the site collection root). This means a single list on the root site works for every subsite out of the box.
2. Explicit override via Theme Manager. Theme Manager's Navigation Source Site URLsetting lets you point any site/subsite to a specific site URL that holds the navigation list. This is useful when the navigation list lives outside the current site collection, or when you want to force a particular source without relying on the automatic fallback.

Reference

Technical details for developers and advanced users.

Extension Properties

CSS Customization

Mega Menu reads Theme Manager branding values as CSS custom properties. Background, foreground, hover background, and hover foreground are each configured explicitly in Theme Manager's Mega Menu Branding section — hover colors are not derived. Additional variables are emitted for navigation/dropdown spacing scales, breadcrumb alignment, and breadcrumb inset.

Keyboard Navigation

Features Checklist

• 3-level hierarchical navigation (levels beyond 3 are skipped)
• Desktop: horizontal bar with hover-triggered mega menu panels (50 ms enter / 400 ms leave)
• Mobile: hamburger button with full-height slide-out drawer and backdrop
• SharePoint list-driven (centrally managed MegaMenuNavigation list)
• Automatic fallback to the site collection root when the list is missing on a subsite
• Shared navigation across sites via Theme Manager Navigation Source Site URL
• Optional Fluent UI icons on menu items (via Icon column)
• Optional breadcrumb with site-collection/subsite ancestry and SPA-aware updates
• Open-in-new-tab option per item (accepts boolean or common string values)
• Enable/disable individual items without deleting (IsEnabled)
• Toggle to show/hide native SharePoint navigation (desktop)
• Toggle to show/hide SharePoint mobile sticky-footer app bar
• SharePoint's header navigation is always hidden on mobile
• Page Layout Fix: hide left sidebar and center content on CMSPUBLISHING sites
• Optional mega menu search with four tabs (All / Documents / People / Locations), hit highlighting, 60-second result cache, 8-second timeout, and multi-source people fallback (SharePoint Search → Microsoft Graph)
• License validation host: whitelist bypass, stale-while-revalidate caching, Active/Warning/Expired/Unknown banners
• Keyboard accessible (Tab, Enter/Space, Escape, Arrow Up/Down) with ARIA roles
• 5-minute in-memory navigation cache (per source URL + list name)
• Theme Manager integration: 4-color picker, logo URL, spacing sliders, breadcrumb controls, search settings, page layout fix
• Responsive design — breakpoint at 768 px

Page Layout Fix

Some SharePoint sites — particularly sub-sites created with the CMSPUBLISHING web template — display a left sidebar panel that takes up space even when the Mega Menu's “Hide native navigation” setting is active. Additionally, Bonzai's full-width canvas zones can cause page content to appear left-aligned instead of centered.

The Page Layout Fix addresses both issues through the Theme Manager, without requiring a separate package or PowerShell scripts.

How to Enable

1. Open the Theme Manager web part (edit your homepage)
2. Scroll to the Mega Menu Branding section
3. Toggle “Enable Page Layout Fix” to ON
4. Optionally adjust the sub-toggles:
   • Hide Left Sidebar — removes the native SharePoint left navigation panel (recommended for CMSPUBLISHING sub-sites)
   • Center Page Content — re-centers page content that full-width zones push left
5. Click Save Theme
6. Hard refresh the page (Ctrl+Shift+R) to verify

What It Does

Migration from Classic Bonzai

The Mega Menu in Bonzai 2 provides similar navigation functionality to Classic Bonzai, rebuilt as a modern SPFx Application Customizer. Key improvements include responsive mobile drawer, keyboard accessibility, and SharePoint list-based configuration instead of master page customization.