Skip to content
Navigation

Primary

A hint under the menu

A short block appears under the left menu: a hint and a link to the right page. This way a reader who came to the page from search does not get lost.

Click “Check responsive preview” above the example and choose a phone. The menu moves behind a button in the header, and the hint goes with it.

How it works

  1. The sidebar region gets two parts. The first, docara.navigation, is the regular site menu.
  2. The second, docara.shell, is an empty frame for your own blocks. It holds two elements: a paragraph p and a link a.
  3. Elements are set with fields, not HTML. Docara writes the markup itself and does not let you insert a script or a foreign address.
region-sidebar.page.json
{  "id": "sidebar-note",  "section": "docara.shell",  "utilities": ["flex", "flex-col", "gap-1"],  "blocks": [    {      "id": "hint",      "block": "shell.element",      "slot": "content",      "element": {"tag": "p", "text": "No test key yet? Start with the quick start.", "utilities": ["m-0"]}    },    {      "id": "start-link",      "block": "shell.element",      "slot": "content",      "element": {"tag": "a", "text": "Quick start", "href": "/en/demonstrator-results/preset-docs/", "aria_label": "Open the Acme Pay quick start"}    }  ]}

What you can change

Parameter What it changes
tag The element type: p for a paragraph, a for a link, span or div
text The element text, up to 500 characters
href The link address: a path inside the site or #anchor
aria_label The link name for screen readers
utilities SIMAI Framework classes for spacing and background, up to 16

To show the hint on every page of a section, move layout to that section’s section.json.

See also