CataUiAnchorMenu

The CataUiAnchorMenu component creates a navigation menu that highlights the currently visible sections on a page. It uses the Intersection Observer API to automatically update the active menu item as the user scrolls through content, and also allows users to click on menu items to navigate to specific sections.

Details

Devices

History

Permissions

Roles

<div class="row">
    <div class="col">
        <CataUiAnchorMenu 
            :anchors="anchors" 
            anchorContainer="anchorContainer" 
            anchorOffset="0px" />
    </div>
    <div class="col anchor-element-container" id="anchorContainer">
        <div class="anchor-element">
            <p id="details">Details</p>
        </div>
        <div class="anchor-element">
            <p id="devices">Devices</p>
        </div>
        <div class="anchor-element">
            <p id="history">History</p>
        </div>
        <div class="anchor-element">
            <p id="permissions">Permissions</p>
        </div>
        <div class="anchor-element">
            <p id="roles">Roles</p>
        </div>
    </div>
</div>

Props

Prop	Description	Type	Default	Required
anchorContainer	ID of the scrollable container that holds the anchor elements	String		true
anchorOffset	Sets the rootMargin of the Intersection Observer, affecting when items are considered visible	String	'0px'	false
anchors	An array of anchor objects with label and anchor ID properties	Array		true

How It Works

The CataUiAnchorMenu component works by:

Observing elements with IDs matching the anchor values provided in the anchors array
Automatically highlighting the corresponding menu item when a section becomes visible in the viewport
Scrolling to the appropriate section when a menu item is clicked

For this component to work properly:

Each element you want to track must have an ID that matches an anchor value in your anchors array
The container element must have an ID that matches the anchorContainer prop value
The container should be scrollable (with overflow: auto or similar CSS)

Data Structure

The anchors prop expects an array of objects with the following structure:

const anchors = [
    {
        label: 'Details',     // Text displayed in the menu
        anchor: 'details',    // ID of the element to link to (without the # symbol)
    },
    {
        label: 'Devices',
        anchor: 'devices',
    },
    {
        label: 'History',
        anchor: 'history',
    },
    {
        label: 'Permissions',
        anchor: 'permissions',
    },
    {
        label: 'Roles',
        anchor: 'roles',
    }
]