Main Menu Configuration Interface Documentation

Overview

This documentation describes the interface structure for a configurable menu system that supports both sidebar and top menu layouts, with customizable styling options.

Core Interfaces

IMainMenu

The root interface that defines the complete menu structure.

Property	Type	Description
settings	`IMainMenuConfiguration`	Global configuration settings for the menu
items	`IMainMenuItem[]`	Array of menu items that compose the menu structure

IMainMenuConfiguration

Defines the overall configuration for the menu system.

Property	Type	Required	Description
layout	`MainMenuLayout`	Yes	Defines the menu layout type (`SIDEBAR` or `TOPMENU`)
useLegacyMenu	`boolean`	No	When `true`, uses the legacy menu. Default: `false` (menu)
sidebar	`ISidebarConfiguration`	No	Configuration specific to sidebar layout
topMenu	`ITopMenuConfiguration`	No	Configuration specific to top menu layout
hideSpAppBar	`boolean`	No	Controls visibility of the SharePoint application bar
hamburguerMenu	`IHamburguerMenuConfiguration`	No	Configuration for hamburger menu (legacy only)
isDisplaySearch	`boolean`	No	Controls visibility of search functionality
accessibleMenu	`IAccessibleMenuConfiguration`	No	Menu-specific callbacks. Property name kept for backwards compatibility

IAccessibleMenuConfiguration

ℹ️

This interface applies to the default Menu only. The property name accessibleMenu and interface name IAccessibleMenuConfiguration are kept as-is for backwards compatibility.

Property	Type	Description
onCloseMobileMenu	`() => void`	Callback invoked when the mobile menu is closed

IMainMenuItem

Represents an individual menu item.

Property	Type	Description
uniqueId	`string`	Unique identifier for the menu item
text	`string?`	Display text for the menu item
actionName	`string?`	Action identifier associated with the item (e.g., FAVORITES, BOOKMARKS)
order	`number`	Position order of the item. Lower numbers appear first
icon	`string?`	Icon identifier — can be an Office UI Fabric icon name
expandedImage	`string?`	Image URL to show when the menu is expanded (menu only)
url	`string?`	Navigation URL
openInNewTab	`boolean?`	Whether to open URL in new tab
parentId	`string?`	ID of parent menu item (used to build hierarchy)
isTop	`boolean?`	Whether item appears in the top section (`true`) or bottom section (`false`)
styles	`IMainMenuItemStyles?`	Custom styles for this item (legacy menu only)
items	`IMainMenuItem[]?`	Nested child items (supports up to 3 levels in menu, 2 in legacy)
name	`string?`	Alternative name identifier; used as fallback for `text` in menu

Style Configuration Interfaces

⚠️

The IMainMenuItemStyles and CSS interpolation styling are primarily used by the legacy menu. The menu uses theme-based colors from the Fluent UI theme palette.

IMainMenuItemStyles

Defines styling options for menu items (legacy menu).

Property	Type	Description
sidebarMenu	`Interpolation?`	Styles for sidebar menu container
item	`Interpolation?`	Styles for menu item container
icon	`Interpolation?`	Styles for item icon
text	`Interpolation?`	Styles for item text
img	`Interpolation?`	Styles for item images

ISidebarConfiguration

Configuration specific to sidebar layout.

Property	Type	Description
isCollapsable	`boolean`	Whether sidebar can be collapsed. When `false`, the sidebar remains expanded (240px), the toggle is hidden, and `defaultDisplay` is ignored. When `true`, shows a toggle button and starts collapsed (rail at 60px)
collapsedMenuItemStyle	`IMainMenuItemStyles`	Styles for collapsed state (legacy)
expandedMenuItemStyle	`IMainMenuItemStyles`	Styles for expanded state (legacy)
selectedMenuItemCollapsedStyle	`Interpolation`	Styles for selected items when collapsed (legacy)
selectedMenuItemExpandedStyle	`Interpolation`	Styles for selected items when expanded (legacy)
sidebarExpandedStyle	`Interpolation`	Styles for expanded sidebar container (legacy)
sidebarCollapseStyle	`Interpolation`	Styles for collapsed sidebar container (legacy)
styleMenuItem	`IMainMenuItemStyles`	Default styles for menu items (legacy)
defaultDisplay	`MenuDisplay`	Default display state: `COLLAPSED` or `EXPANDED` (legacy only; menu always starts collapsed when collapsable)

ITopMenuConfiguration

Configuration specific to top menu layout.

Property	Type	Description
styleMenuItem	`IMainMenuItemStyles`	Styles for menu items (legacy)
selectedMenuItemStyle	`Interpolation`	Styles for selected menu items (legacy)

IHamburguerMenuConfiguration

Configuration for hamburger menu (legacy only).

Property	Type	Description
styleMenuItem	`IMainMenuItemStyles`	Styles for menu items
selectedMenuItemStyle	`Interpolation`	Styles for selected menu items

Enums

MainMenuLayout

Defines possible menu layout types.

SIDEBAR: Vertical sidebar layout
TOPMENU: Horizontal top menu layout

MenuDisplay

Defines sidebar display states (legacy menu behavior).

COLLAPSED: Minimized sidebar state
EXPANDED: Full-width sidebar state

MainMenuItemPosition

Defines possible positions for menu items.

TOP: Top position
BOTTOM: Bottom position
LEFT: Left position (alias for TOP)
RIGHT: Right position (alias for BOTTOM)

Usage Examples


const menuConfig: IMainMenu = {
  settings: {
    layout: MainMenuLayout.SIDEBAR,
    sidebar: {
      isCollapsable: true,
    },
  },
  items: [
    {
      uniqueId: 'home',
      text: 'Home',
      order: 1,
      icon: 'Home',
      url: '/home',
      isTop: true,
    },
    {
      uniqueId: 'docs',
      text: 'Documents',
      order: 2,
      icon: 'Document',
      isTop: true,
      items: [
        {
          uniqueId: 'docs-shared',
          text: 'Shared Documents',
          order: 1,
          url: '/docs/shared',
          items: [
            {
              uniqueId: 'docs-shared-recent',
              text: 'Recent',
              order: 1,
              url: '/docs/shared/recent',
            },
          ],
        },
        {
          uniqueId: 'docs-personal',
          text: 'My Documents',
          order: 2,
          url: '/docs/personal',
        },
      ],
    },
    {
      uniqueId: 'settings',
      text: 'Settings',
      order: 1,
      icon: 'Settings',
      url: '/settings',
      isTop: false, // Appears in bottom group
    },
  ],
};


const menuConfig: IMainMenu = {
  settings: {
    layout: MainMenuLayout.TOPMENU,
  },
  items: [
    {
      uniqueId: 'home',
      text: 'Home',
      order: 1,
      icon: 'Home',
      url: '/home',
      isTop: true,
    },
    {
      uniqueId: 'links',
      text: 'Links',
      order: 2,
      icon: 'Link',
      isTop: true,
      items: [
        {
          uniqueId: 'link-1',
          text: 'Microsoft SharePoint Blog',
          order: 1,
          url: 'https://techcommunity.microsoft.com/t5/sharepoint/ct-p/SharePoint',
          openInNewTab: true,
        },
      ],
    },
  ],
};


const menuConfig: IMainMenu = {
  settings: {
    useLegacyMenu: true,
    layout: MainMenuLayout.SIDEBAR,
    hideSpAppBar: false,
    isDisplaySearch: true,
    sidebar: {
      isCollapsable: true,
      defaultDisplay: MenuDisplay.EXPANDED,
      sidebarExpandedStyle: 'background-color: #003f5f;',
      expandedMenuItemStyle: {
        icon: 'color: #ffffff;',
        text: 'color: #ffffff;',
      },
      collapsedMenuItemStyle: {
        icon: 'color: #ffffff;',
      },
    },
  },
  items: [
    {
      uniqueId: 'home',
      text: 'Home',
      order: 1,
      icon: 'Home',
      url: '/home',
    },
  ],
};