Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add reading-toc

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

Overview

<x-aura::reading-toc> lists the headings and marks the one you are in. It must sit inside reading-shell.

Basic Usage

<x-aura::reading-toc :items="[
    [\"id\" => \"install\", \"label\" => \"Installation\"],
    [\"id\" => \"config\", \"label\" => \"Configuration\", \"level\" => 3],
]" />

Strings work too — the id is slugged from the label.

Props

Prop Type Default Description
items array [] Strings, or arrays with id, label, level.
title string|null null Defaults to the translated "On this page".
sticky bool true Follows the reader down the page.

Accessibility

  • Real links, not buttons. A heading in the same document has a URL, and someone should be able to open it in a new tab or copy it. The smooth scroll is layered on top.
  • aria-current="location" marks the section you are in — the accent colour alone does not say it.
  • The nav is named by its own heading.