Back to view formats
View formattingSharePoint Online

Menu Style List

This sample transforms SharePoint list items into a styled menu layout using list view formatting.

Menu Style List formatting preview
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",
  "hideSelection": true,
  "hideColumnHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-communicationTint20"
      },
      "style": {
        "position": "absolute",
        "left": "-36px",
        "right": "0px",
        "top": "0px",
        "bottom": "0px",
        "font-size": "16px",
        "font-weight": "400",
        "outline": "0px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis",
        "width": "100%",
        "padding-right": "30px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "padding": "10px",
            "display": "flex",
            "align-items": "center",
            "justify-items": "center"
          },
          "children": [
            {
              "elmType": "span",
              "style": {
                "font-size": "20px",
                "padding-left": "5px",
                "padding-right": "15px"
              },
              "attributes": {
                "iconName": "=if(@group.fieldData.displayValue == 'Appetizers', 'EatDrink', if(@group.fieldData.displayValue == 'Drinks', 'CoffeeScript', if(@group.fieldData.displayValue == 'Desserts', 'Cake', if(@group.fieldData.displayValue == 'Main Courses', 'Chopsticks', ''))))"
              }
            },
            {
              "elmType": "span",
              "style": {
                "font-size": "18px",
                "font-weight": "600"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "100%",
      "display": "flex",
      "margin": "5px 0px 5px 0px",
      "padding": "5px 20px 5px 20px",
      "box-shadow": "none",
      "align-items": "center",
      "justify-content": "space-between"
    },
    "children": [
      {
        "elmType": "span",
        "txtContent": "[$Title]",
        "style": {
          "font-size": "14px",
          "font-weight": "600",
          "color": "#333",
          "text-align": "left",
          "white-space": "nowrap",
          "display": "inline-block"
        }
      },
      {
        "elmType": "span",
        "attributes": {
          "class": "ms-bgColor-white"
        },
        "style": {
          "flex": "1",
          "border-bottom": "2px dotted #333",
          "margin-left": "10px",
          "margin-right": "10px",
          "margin-top": "10px",
          "display": "inline-block",
          "height": "1px"
        }
      },
      {
        "elmType": "span",
        "txtContent": "='$' + [$Price]",
        "style": {
          "font-size": "14px",
          "font-weight": "600",
          "text-align": "right",
          "white-space": "nowrap",
          "display": "inline-block"
        }
      }
    ]
  }
}

From the contributor

How to use this sample

Summary

This sample transforms SharePoint list items into a styled menu layout using list view formatting. Each row is automatically formatted to visually separate the item name and price, mimicking a clean, restaurant-style pricing table - perfect for food menus, service lists, or product offerings.

screenshot of the sample

screenshot of the sample displayed on the page

Note: To customise group icons (e.g. for MainCategory), edit the iconName attribute in the JSON (around line 42).

"attributes": {
  "iconName": "=if(@group.fieldData.displayValue == 'Appetizers', 'EatDrink', if(@group.fieldData.displayValue == 'Drinks', 'CoffeeScript', if(@group.fieldData.displayValue == 'Desserts', 'Cake', if(@group.fieldData.displayValue == 'Main Courses', 'Chopsticks', ''))))"
}

View requirements

Type Internal Name Required
Single line of text Title Yes
Number Price Yes
Choice MainCategory Yes
  • Make sure to use the List View and include all the specified fields in the view.
  • To customize the menu order, add a sorting column (e.g., OrderNumber) and use it as the sort field in the view.

Sample

Solution Author(s)
menu-style-list.json Tanel Vahk

Version history

Version Date Comments
1.0 June 3, 2025 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.