SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Vertical Mega Menu

This sample demonstrates the use of multi lines of text column value and the split operator to display a vertical mega menu.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Dec 13, 2022

Vertical Mega Menu
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "300px",
      "height": "50px",
      "border-bottom": "1px solid",
      "text-decoration": "none",
      "display": "flex",
      "flex-direction": "row",
      "font-size": "18px",
      "cursor": "default"
    },
    "attributes": {
      "class": "ms-bgColor-themeLighter--hover"
    },
    "customCardProps": {
      "openOnEvent": "hover",
      "directionalHint": "rightCenter",
      "isBeakVisible": true,
      "formatter": {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "align-items": "flex-start",
          "flex-wrap": "wrap",
          "max-width": "=if(@window.innerWidth>750,floor((@window.innerWidth-550)/250)*250+'px','250px')"
        },
        "children": [
          {
            "elmType": "div",
            "forEach": "listItems in split([$Menu],'@@@')",
            "style": {
              "display": "=if([$listItems]=='','none','flex')",
              "flex-direction": "column",
              "width": "200px",
              "padding": "20px 25px"
            },
            "children": [
              {
                "elmType": "div",
                "forEach": "listItem in split([$listItems],'>')",
                "style": {
                  "margin-bottom": "8px",
                  "display": "=if([$listItem]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "=[$listItem]",
                    "style": {
                      "display": "=if(indexOf([$listItem],'|')>-1,'none','')",
                      "font-weight": "bold",
                      "font-size": "18px",
                      "margin-bottom": "5px",
                      "white-space": "nowrap",
                      "overflow": "hidden"
                    }
                  },
                  {
                    "elmType": "a",
                    "txtContent": "=substring([$listItem],0,indexOf([$listItem],'|'))",
                    "style": {
                      "display": "=if(indexOf([$listItem],'|')>-1,'','none')",
                      "font-size": "14px",
                      "text-decoration": "none"
                    },
                    "attributes": {
                      "href": "=replaceAll(substring([$listItem],indexOf([$listItem],'|')+1,indexOf([$listItem]+'^','^')),'\n','')",
                      "target": "_blank",
                      "class": "ms-fontColor-neutralPrimaryAlt ms-fontColor-themePrimary--hover"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "text-align": "center"
        },
        "attributes": {
          "iconName": "[$Icon]"
        }
      },
      {
        "elmType": "div",
        "style": {
          "width": "60%"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "text-align": "center"
        },
        "attributes": {
          "iconName": "ChevronRightMed"
        }
      }
    ]
  }
}
View sourceLink to this definitionvertical-mega-menu.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /rowFormatter/customCardProps/formatter/children/0/children/0/forEach must match pattern "^[^\]\$@\. ]+ in (\@currentField|\[\$.+\])$"

From the contributor

How to use this sample

Summary

This sample demonstrates the use of multi lines of text column value and the split operator to display a vertical mega menu.

screenshot of the sample

View requirements

Type Internal Name Required
Single line of text Title Yes
Single line of text Icon Yes
Multi lines of text Menu Yes
  • Set the icon name of Fluent UI Icons in the Icon column.
  • Set the Menu column to a value like the following.
@@@[Header]
>[Link Text]|[URL]
>[Link Text]|[URL]
>[Link Text]|[URL]
@@@[Header]
>[Link Text]|[URL]
>[Link Text]|[URL]
>[Link Text]|[URL]

Note: Do not set > and |, which are used as delimiters, to [Header] and [Link Text].

  • The following is an example of the value of the Menu column.
@@@Samples
>Power Platform Samples|https://pnp.github.io/powerplatform-samples/
>SharePoint Framework Web Parts|https://pnp.github.io/sp-dev-fx-webparts/
>SharePoint Framework Extensions‍|https://pnp.github.io/sp-dev-fx-extensions/
>SharePoint Framework Viva Adaptive Card Extensions|https://github.com/pnp/sp-dev-fx-aces/
>Script Samples|https://pnp.github.io/script-samples/
>Teams Apps Samples|https://pnp.github.io/teams-dev-samples/
>Office Add-ins PnP|https://github.com/OfficeDev/Office-Add-in-samples/
>Microsoft 365 Learning Pathways|https://github.com/pnp/custom-learning-office-365/
>List Formatting Samples|https://pnp.github.io/List-Formatting/
>Library Component Samples & Tutorials|https://github.com/pnp/sp-dev-fx-library-components/
@@@Solutions
>SharePoint Look Book|https://lookbook.microsoft.com/
>Teams App Templates|https://learn.microsoft.com/microsoftteams/platform/samples/app-templates/
>PnP Modern Search|https://microsoft-search.github.io/pnp-modern-search/
>SharePoint Starter Kit‍|https://github.com/pnp/sp-starter-kit/

Sample

Solution Author(s)
vertical-mega-menu.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 December 13, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format