Mega Menu
3-level hierarchical navigation with desktop mega menu panels and mobile drawer.
This is an Application Customizer, not a web part
Two-step activation required
License banner awareness
Legacy package note
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.
- Open the App Catalog site:
https://<tenant>.sharepoint.com/sites/appcatalog - Go to Site Contents → Tenant Wide Extensions
- Click New → Application Customizer
- 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,"licenseApiUrl":""}
Sequence: 100 (optional)
Web Template / List Template / Host Properties: leave blankGet Mega Menu Working in 4 Steps
Prerequisites
- Bonzai 2 package (.sppkg) uploaded to your tenant App Catalog
- Site Collection Administrator permissions on your target site
- Understanding of SharePoint list creation
Create the Navigation list
Create a SharePoint list named "MegaMenuNavigation" with the required columns (see schema below).
Add your navigation items
Create list items for your menu hierarchy: Level 1 items have no parent, Level 2/3 items reference their parent.
Add the Bonzai app to your site
Go to Site Contents → New → App, then add the Bonzai 2 app to activate the Mega Menu extension on this site.
Verify and customize
Navigate your site to confirm the menu appears. Use the toggle button to show/hide native SharePoint navigation.
3-Level Navigation Hierarchy
Build rich navigation structures with up to 3 levels of nesting. Root items appear in the top bar, second level items appear in mega menu panels, and third level items appear as sub-links within those panels.
When to Use This Web Part
Use this when you need to...
- Replace SharePoint's default horizontal navigation
- Create a consistent mega menu across all site pages
- Provide mobile-friendly slide-out navigation
- Organize deep navigation hierarchies (up to 3 levels)
- Centrally manage navigation from a SharePoint list
Best page locations
- Intranet home sites — primary site navigation
- Hub sites — unified navigation across connected sites
- Multi-site deployments — share one navigation list across subsites
- Communication sites — polished navigation experience
- Any site needing multi-level navigation
Consider alternatives when...
- • Individual page navigation — use Advanced Links web part
- • Footer links — Mega Menu only appears in the header
- • Sites with simple single-level navigation — may be overkill
Related web parts:
Branding and Logo
- Mega Menu reserves a logo slot on the left for desktop and mobile layouts.
- Set Mega Menu background and text colors in Theme Manager → Mega Menu Branding.
- Provide an absolute PNG logo URL in Theme Manager to display the logo.
- Accent and hover colors are derived from the Mega Menu Branding foreground color.
- New: Spacing and breadcrumb controls (Theme Manager)
- Navigation Bar Spacing: slider that adjusts padding on top-level nav items (50–150%).
- Dropdown Panel Spacing: separate slider for padding inside dropdown flyouts (50–150%).
- Breadcrumb controls: show/hide, left/center/right alignment, and an inset slider (0–40%) to push the breadcrumb inward responsively.
Breadcrumb is controlled in two places
showBreadcrumb enables the breadcrumb feature. Theme Manager then controls the breadcrumb’s visibility and layout (show/hide, alignment, inset) using CSS custom properties.Navigation Hierarchy
Mega Menu supports a 3-level navigation structure:
Root navigation items displayed in the horizontal menu bar. Click or hover to open Level 2 panel.
Second-level items displayed in the dropdown mega menu panel. Can have Level 3 children.
Third-level items displayed as links under their Level 2 parent. Maximum nesting depth.
Desktop and Mobile Behavior
Desktop
Horizontal bar + hover panels
- Level 1 items in horizontal bar
- Hover to open mega menu panels
- Keyboard accessible (Enter, Escape, Arrows)
- Smooth hover delay for usability
Mobile
Hamburger + slide-out drawer
- Hamburger menu button
- Full-height slide-out drawer
- Expandable accordion for nested items
- Touch-friendly tap targets
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
| Column | Internal Name | Type | Required | Description |
|---|---|---|---|---|
| Title | Title | Single line of text | Yes | Display text for the menu item |
| URL | URL | Hyperlink | Yes | Navigation URL (relative or absolute) |
| Parent | Auto-detected | Lookup (to same list) | No | Parent item for hierarchy. Internal name varies; Mega Menu auto-detects. |
| Sort Order | SortOrder | Number | Yes | Display order within the same level (1, 2, 3...) |
| Open In New Tab | OpenInNewTab | Yes/No | No | Open link in new browser tab |
| Icon | Icon | Single line of text | No | Fluent UI icon name (e.g., "Home", "People") |
| Is Enabled | IsEnabled | Yes/No | No | Show/hide item. Default: Yes |
Create the Parent lookup column
Step-by-Step Setup
Create the navigation list
Add the URL column
Add the SortOrder column
Add the Parent lookup column
SharePoint generates the internal name automatically; Mega Menu auto-detects it.
Add optional columns
Create Level 1 items first
Create Level 2 items
Create Level 3 items (optional)
Maximum depth is 3 levels. Items with deeper nesting will be ignored.
Add the Bonzai app to your site
The Bonzai package must first be uploaded to your tenant App Catalog. Then you add it to each site where you want to use Mega Menu.
Navigate your site
Toggle native navigation (optional)
Common Configurations
Example navigation structures:
Simple 2-Level Menu
Basic navigation with departments
| Level 1 | Home, About, Services, Contact |
| Level 2 | 2-3 items per Level 1 |
| Level 3 | Not used |
| Icons | Optional |
Department Hub
Multi-department navigation
| Level 1 | HR, IT, Finance, Operations |
| Level 2 | Policies, Tools, Team, FAQs per dept |
| Level 3 | Specific pages/links |
| Icons | People, Settings, Money, Gear |
Full 3-Level Structure
Deep navigation hierarchy
| Level 1 | 5-8 main sections |
| Level 2 | 3-6 subsections each |
| Level 3 | 2-5 pages per subsection |
| External Links | OpenInNewTab = Yes |
Best Practices
Use consistent SortOrder numbering
Keep Level 1 concise
Use IsEnabled for seasonal items
Test on mobile devices
Navigation caches for 5 minutes
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. Instead, use Theme Manager's Navigation Source Site URL to point all subsites to a single root site that holds the navigation list.
Set up shared navigation in Theme Manager
https://tenant.sharepoint.com/sites/intranet) in the "Navigation Source Site URL" field. Save with "Persist to Site" enabled. The Mega Menu will fetch its navigation list from that root site instead of the current subsite.Root site setup
Reference
Technical details for developers and advanced users.
Extension Properties
| Property | Type | Default | Description |
|---|---|---|---|
navigationListName | Text | MegaMenuNavigation | Name of the SharePoint list containing navigation items |
hideNativeNavigation | Boolean | true | Hide SharePoint's native site navigation |
hideMobileAppBar | Boolean | true | Hide SharePoint's mobile sticky footer app bar |
showBreadcrumb | Boolean | true | Show breadcrumb navigation below the menu bar |
CSS Customization
Mega Menu uses Theme Manager branding variables (background, foreground, logo) and derives accent colors from the Mega Menu foreground color for hover/active states.
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Move between Level 1 items |
| Enter / Space | Open mega menu panel for current item |
| Escape | Close open panel |
| Arrow Down | Open submenu if item has children |
| Arrow Up | Close submenu |
Features Checklist
- 3-level hierarchical navigation
- Desktop: horizontal bar with hover-triggered mega menu panels
- Mobile: hamburger menu with slide-out drawer
- SharePoint list-driven (centrally managed)
- Optional Fluent UI icons on menu items
- Optional breadcrumb navigation under the menu bar
- Open in new tab option per item
- Enable/disable individual items without deleting
- Toggle to show/hide native SharePoint navigation
- Toggle to show/hide SharePoint mobile app bar
- Keyboard accessible (WCAG compliant)
- 5-minute cache for performance
- Shared navigation across sites via Theme Manager Navigation Source
- Theme Manager integration (colors, logo, branding)
- Responsive design
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.