Content Navigation

The Content Navigation example turns a simple SharePoint list into a set of clickable navigation tiles, so a landing page or hub can point people to the right place at a glance instead of listing bare links. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the label column. Each tile shows a colored icon, a bold label, a short description, and a chevron, and the whole tile is one big link - anything with an unmapped icon falls back to a neutral link tile so the menu always looks intentional.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Hyperlink Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each row as a clickable navigation tile with a colored icon, a label, and a short description
• Makes the whole tile one large link, so the entire card is easy to click – not just the text
• Color-codes the icon by category, so a hub of links reads by type at a glance
• Uses a Choice column to pick the icon, so editors add a link without ever touching the JSON
• Applied as column-formatting JSON on the label column, so it changes the look without changing the data
• Any row with an unmapped icon falls back to a neutral link tile instead of looking broken

Common Use Cases

• A department or team landing page
• An intranet quick-links or hub menu
• A resource or knowledge-base index
• An onboarding start-here list
• A set of app or system shortcuts
• A curated links list on a project site

Details

• Design Pattern: Cards & Tiles
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then add a row per destination – a label, the link, a short description, and an icon.
3. Internal column names (in brackets) must match the JSON exactly.
4. The icons key off the choice values Docs, Forms, People, Help, and Data – use these exact words or edit them in the JSON to match yours (anything else gets a neutral link icon).
5. Create the destination field as a Hyperlink column, not an Image or Picture column.
6. Use destination URLs the client users can open – the tile opens the link in a new tab but cannot bypass SharePoint, page, file, or form permissions.

How to Apply JSON code

1. Select the Label column header, then Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.
4. Widen the Label column and hide the others so each tile has room.
5. Keep the view in List layout so the whole tile stays clickable.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "[$Url]",
    "target": "_blank",
    "title": "=('Open ' + @currentField)"
  },
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "align-items": "center",
    "gap": "14px",
    "padding": "12px 16px",
    "margin": "6px 0",
    "background-color": "#ffffff",
    "border": "1px solid #e5e7eb",
    "border-radius": "12px",
    "box-shadow": "0 1px 2px rgba(0,0,0,0.08)",
    "text-decoration": "none",
    "box-sizing": "border-box",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "flex-shrink": "0",
        "width": "46px",
        "height": "46px",
        "border-radius": "10px",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "font-size": "22px",
        "background-color": "=if([$Icon] == 'Docs', '#e5f0fa', if([$Icon] == 'Forms', '#e3f2f1', if([$Icon] == 'People', '#efe9f7', if([$Icon] == 'Help', '#fbe9df', if([$Icon] == 'Data', '#e7f5ec', '#f0f0f0')))))"
      },
      "txtContent": "=if([$Icon] == 'Docs', '📄', if([$Icon] == 'Forms', '📝', if([$Icon] == 'People', '👥', if([$Icon] == 'Help', '🛟', if([$Icon] == 'Data', '📊', '🔗')))))"
    },
    {
      "elmType": "div",
      "style": {
        "flex-grow": "1",
        "display": "flex",
        "flex-direction": "column",
        "gap": "2px",
        "min-width": "0"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "16px",
            "font-weight": "700",
            "color": "#201f1e",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis"
          },
          "txtContent": "@currentField"
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "13px",
            "font-weight": "500",
            "color": "#5a5a5a",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis"
          },
          "txtContent": "[$Description]"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "flex-shrink": "0",
        "font-size": "22px",
        "font-weight": "700",
        "color": "#a19f9d",
        "padding-right": "4px"
      },
      "txtContent": "›"
    }
  ]
}

Common Questions About the Content Navigation