Site with Outline Navigation

      A document snapshot of a Home Document:

      {
        "name": "F1 Fans",
        "content": [
          {
            "block": {
              "id": "block1",
              "type": "Heading",
              "text": "Teams",
              "style": "h1"
            },
            "children": [
              {
                "block": {
                  "id": "block2",
                  "type": "Heading",
                  "text": "Ferrari"
                },
                "children": [
                  {
                    "block": {
                      "id": "block3",
                      "type": "Paragraph",
                      "text": "Founded by Enzo Ferrari in 1929"
                    }
                  }
                ]
              },
              {
                "block": {
                  "id": "block2",
                  "type": "Heading",
                  "text": "Mercedes"
                },
                "children": [
                  {
                    "block": {
                      "id": "block3",
                      "type": "Paragraph",
                      "text": "First raced in 1954"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }

    This Document will have the following Navigation structure. Because the navigation is not explicitly defined in the document, the nav is an Outline of the Document content:

      Teams

        Ferrari

        Mercedes

    Site with Shared Sidebar

      A Sub-Document may embed the navigation of a parent document. Imagine there is a document /teams/ferarri:

      {
        "name": "Ferrari",
        "content": [],
        "navigation": [
          {
            "block": {
              "id": "block1",
              "type": "Heading",
              "text": "Drivers",
              "style": "h1"
            },
            "children": [
              {
                "block": {
                  "id": "block2",
                  "type": "Embed",
                  "link": "hm://123/teams/ferrari/drivers/louis-hamilton",
                  "view": "Card"
                }
              },
              {
                "block": {
                  "id": "block3",
                  "type": "Embed",
                  "link": "hm://123/teams/ferrari/drivers/charles-leclerc",
                  "view": "Card"
                }
              }
            ]
          }
        ]
      }

      This Document will have the navigation structure:

        Drivers

          Louis Hamilton

          Charles Leclerk

      The driver document is located at /teams/ferrari/drivers/louis-hamilton:

      {
        "name": "Louis Hamilton",
        "content": [],
        "navigation": [
          {
            "block": {
              "id": "block1",
              "type": "Embed",
              "link": "hm://123/teams/ferrari",
              "view": "Navigation"
            }
          }
        ]
      }

      The navigation structure matches the drivers doc. When you click on "Louis Hamilton" from the drivers navigaion, the Louis page highlights and the navigation content stays the same.

Powered by Seed Hypermedia