A sticky sidebar navigation component that automatically tracks the active section as you scroll.
Automatic table of contents navigation with scroll tracking.
The Sidebar TOC (Table of Contents) component provides an elegant way to navigate through long-form content. It automatically highlights the current section as users scroll through the page.
This component uses Intersection Observer API to detect which section is currently visible and updates the active state accordingly with smooth scrolling behavior.
<x-ui::sidebar-toc :sections="$sections" />Included in the Phara UI Kit package with Alpine.js dependency.
The component is included in the Phara UI Kit package. Make sure you have Alpine.js installed as it's required for the interactive functionality.
npm install alpinejsDefine sections array and pass it to the component.
Define your sections as an array with 'id' and 'title' keys, then pass it to the component.
@php
$sections = [
['id' => 'intro', 'title' => 'Introduction'],
['id' => 'usage', 'title' => 'Usage'],
['id' => 'examples', 'title' => 'Examples'],
];
@endphp
<div class="lg:flex lg:gap-12">
<div class="flex-1">
<section id="intro">...</section>
<section id="usage">...</section>
<section id="examples">...</section>
</div>
<x-ui::sidebar-toc :sections="$sections" />
</div>Component properties and configuration options.
| Prop | Type | Required | Description |
|---|---|---|---|
| sections | Array | Yes | Array of sections with 'id' and 'title' keys |
[
'id' => 'string', // Must match the section element's id attribute
'title' => 'string' // Display text shown in the navigation
]Key features and common use cases for the component.
<x-ui::sidebar-toc :sections="$sections" />