Examples
Examples
Live Example
The Jump Links component above is a live instance placed on this page. It automatically discovers the titled Grid sections below (Usage Notes, Control Properties) and generates anchor links for each one. Click any link to smooth-scroll to that section.
Default Configuration
This example uses the default rendering with:
- Label – Set to “Jump To” which displays as the prefix text before the generated links.
- Placement – Placed directly in the
mainplaceholder, outside of any Grid section, so it can read all sibling Grid renderings on the page. - Grid Titles – Each Grid section’s Title parameter becomes a clickable jump link. Sections with HideFromJumpLinks enabled are excluded.
Custom Label Configuration
To change the label prefix, set the Label rendering parameter to any text value. For example, setting it to “On This Page” would render: On This Page • Section 1 • Section 2.
Hiding Sections from Jump Links
To prevent a Grid section from appearing in the jump links, enable the HideFromJumpLinks checkbox on that Grid rendering’s parameters. This is useful for utility sections like sidebars or footers that should not be navigable via jump links.
Usage Notes
- Jump Links has no datasource template. It does not store its own content — it discovers linkable sections from sibling Grid renderings on the same page at runtime.
- Each Grid section whose Title parameter is populated and whose HideFromJumpLinks parameter is not set will appear as a link. The link text is taken from the grid’s
TOCTitleparameter if present, otherwise fromTitle. - The
[data-jumplink]attribute on target sections provides ascroll-margin-topoffset (default 100px) so the section is not hidden behind a sticky header after scrolling. - On narrow viewports the inline link list is replaced by a
<select>dropdown for a more compact layout. - The Label rendering parameter is rendered as a non-wrapping text span to the left of the links (e.g., “Jump to:”). Leave it empty to show only the anchor links.
- Standard BSTools5 Column classes and
AddClassare applied to the outer wrapper<div>.
Control Properties
Jump Links
The Jump Links component renders a horizontal bar of quick-navigation anchor links that scroll to specific sections on the current page. It works by discovering sibling Grid sections that have their HideFromJumpLinks parameter unset and builds the link list automatically at runtime using client-side JavaScript. An optional Label rendering parameter lets authors prefix the link bar with descriptive text (e.g., “Jump to:”). On smaller viewports the links collapse into a <select> dropdown for touch-friendly navigation.
| Parameter | Type | Description |
|---|---|---|
| Label | Single-Line Text | Optional text displayed to the left of the anchor links (e.g., “Jump to:”). Rendered inside a <span class="mkl-jump-links-label">. Leave empty to show links only. |
| data-testid | Single-Line Text | Sets a data-testid attribute on the wrapper <div> for automated testing. |
| Inherited: Small, Medium, Large, Offset columns | — | Standard BSTools5 column sizing and offset parameters for responsive grid layout. |
| Inherited: AddClass | Single-Line Text | Additional CSS classes appended to the component wrapper div. |
Note: The Jump Links component has no datasource template. It discovers linkable sections from sibling Grid components at runtime.