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
- The
sidebarregion gets two parts. The first,docara.navigation, is the regular site menu. - The second,
docara.shell, is an empty frame for your own blocks. It holds two elements: a paragraphpand a linka. - 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.