Smart Anchors

Navigate Your Content with Ease!

The ultimate solution for effortlessly generating a dynamic navigation menu based on page content.

Navigation Anchors
On-the-Fly!

The ultimate solution for effortlessly generating a dynamic navigation menu based on page content.

Overview

Smart Anchors is a project file configured to generate on-the-fly navigation anchors from headings (tags h1, h2, h3, h4, h5, h6) and dynamically populate a Menu stack with the corresponding items.

For the content from which anchors will be generated you can use any stack you wish (Header, Text or any stack that allows to enter text and/or header tags). The important thing is that all these stacks are placed within the stack used as the content wrapper of Smart Anchors. When you launch the preview (or save content online with TCMS) Smart Anchors detects the header tags and transforms them on-the-fly into anchors in the respective Menu stack.

You don't have to worry about anything, you only have to write your content and based on the headings entered, a navigation menu will be generated instantly.
Smart Anchors saves you time and greatly enhances page content navigation.

Main Features

On-the-fly


Automatically generate navigation anchors from headings (h1, h2, h3, h4, h5, h6) and dynamically populate a Menu stack with the corresponding items.

Example #1

Custom Anchors


It is also possible to generate custom anchors by assigning a specific class to a text.

Example #2

Dividers


It also automatically detects any Divider stacks or <hr> tags present and populates the Menu stack with corresponding separators on-the-fly. This ensures that the menu mirrors the content structure on the page.

Example #3

Smart Exclusion


Title and Dividers can be excluded from the navigation anchors menu by assigning them a specific class. For titles within a text, where it is more complicated to set a class, a specific macro can be used at the beginning of the title to exclude it.

Example #4

Hierarchy Styles


When a menu item is generated, a specific class is assigned based on the header type of it references. This allows for the application of specific styles, thereby enhancing the visual hierarchy of the content. Have fun creating your own menu style!

Example #5

Total CMS


Of course it integrates perfectly with Total CMS, the navigation menu will be generated on the fly by simply editing the text from the site administration area. This function is particularly useful for Blog Post page content.

Live Test:
Example #6

Hidden on Small


By default on Small size the Smart Anchors wrapper is collapsed but with a button you can expand/collapse it.