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 using Emotion’s interpolation.

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	Description
layout	`MainMenuLayout`	Defines the menu layout type (SIDEBAR or TOPMENU)
sidebar	`ISidebarConfiguration`	Configuration specific to sidebar layout
topMenu	`ITopMenuConfiguration`	Configuration specific to top menu layout
hideSpAppBar	`boolean`	Controls visibility of the application bar
hamburguerMenu	`IHamburguerMenuConfiguration`	Configuration for hamburger menu
isDisplaySearch	`boolean`	Controls visibility of search functionality

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
order	`number`	Position order of the item
icon	`string?`	Icon identifier/path
expandedImage	`string?`	Image to show when expanded
url	`string?`	Navigation URL
openInNewTab	`boolean?`	Whether to open URL in new tab
parentId	`string?`	ID of parent menu item
isTop	`boolean?`	Whether item appears in top section
styles	`IMainMenuItemStyles?`	Custom styles for this item
items	`IMainMenuItem[]?`	Submenu items
name	`string?`	Alternative name identifier

Style Configuration Interfaces

IMainMenuItemStyles

Defines styling options for menu items.

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
collapsedMenuItemStyle	`IMainMenuItemStyles`	Styles for collapsed state
expandedMenuItemStyle	`IMainMenuItemStyles`	Styles for expanded state
selectedMenuItemCollapsedStyle	`Interpolation`	Styles for selected items when collapsed
selectedMenuItemExpandedStyle	`Interpolation`	Styles for selected items when expanded
sidebarExpandedStyle	`Interpolation`	Styles for expanded sidebar
sidebarCollapseStyle	`Interpolation`	Styles for collapsed sidebar
styleMenuItem	`IMainMenuItemStyles`	Default styles for menu items
defaultDisplay	`MenuDisplay`	Default display state

ITopMenuConfiguration

Configuration specific to top menu layout.

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

IHamburguerMenuConfiguration

Configuration for hamburger menu.

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.

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 (same as TOP)
RIGHT: Right position (same as BOTTOM)

Usage Example

const menuConfig: IMainMenu = {
  settings: {
    layout: MainMenuLayout.SIDEBAR,
    hideSpAppBar: false,
    isDisplaySearch: true,
    sidebar: {
      isCollapsable: true,
      defaultDisplay: MenuDisplay.EXPANDED,
      // ... other sidebar configurations
    },
    topMenu: {
      styleMenuItem: {
        // ... style configurations
      },
      selectedMenuItemStyle: {
        // ... selected item styles
      }
    },
    hamburguerMenu: {
      // ... hamburger menu configurations
    }
  },
  items: [
    {
      uniqueId: "home",
      text: "Home",
      order: 1,
      icon: "home-icon",
      url: "/home"
    }
    // ... other menu items
  ]
};

Examples Omnichannel