Skip to content

Navigation layouts

Navigation target to point to a layout

Extending layout into navigation bar

For some case, you want to extends the content of the layout to behind the navigation bar (app bar). Specifically, your navigation bar has a curved corner where you want push your layout to behind the navigation bar so that it appeared as blended in.

{
  "target": "page",
  "icon": "far fa...",
  "options": {
    "id": "campaign-home",
    "allowExtended": true
  },
  "title": "Campaign brands",
  "iconActive": "fas fa..."
}

Layout

{
  "data": {
    "sources": [
        ...
    ]
  },
  "styles": {
    "root": {
      "description": "set the background color of your page",
      "backgroundColor": "#f65275"
    }
  },
  "ux": {
    "component": "grid",
    "description": "make the grid scrollable so that if contents overflow, user can scroll",
    "options": {
      "scroll": true
    },
    "styles": {
      "description": "add top padding enough so that the actual content doesn't hide behind the navigation bar",
      "padding": "140px 15px 0px 15px",
      "height": "100vh"
    },
    "children": [
        ...your layout children
    ]
  }