# nord-outline > Outline is an in-page table of contents that lists a page's headings and > highlights the section currently in view as you scroll. > > Provide Outline Item children, or point for at > a container to build the list from its headings. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Use Outline as a table of contents for navigation *within* a single long page, such as documentation, help articles or long settings pages. - Pass a flat, ordered list of [Outline Item](/components/outline-item/) children and let `level` control the indentation. - Set `active` when your own scroll logic owns the active section — this disables the built-in scroll-spy. - Use `density="compact"` in dense sidebars where vertical space is tight. - Use `for` to generate the outline from a content container's headings automatically. > **Don't:** - Don’t use Outline for application navigation between routes — use [Navigation](/components/navigation/) instead. - Don’t use Outline for expandable, collapsible hierarchy. - Don’t place a `

` element inside the outline, as the host already exposes a navigation landmark. --- ## Content guidelines Outline item labels should match the headings they link to. Write them in sentence case, keep them short, and avoid ending in punctuation: > **Do:** Getting started > **Don't:** Getting Started. ## Examples ### Overview ```html

Introduction

Installation

Usage

Accessibility

``` ### Levels ```html

Overview

Core concepts

Design tokens

Naming scheme

Components

Reference

``` ### Compact ```html

Introduction

Installation

Usage

API

Accessibility

``` ### Controlled ```html

Introduction

Installation

Usage

Accessibility

``` ### Scroll Spy ```html

${content('spy')} ${items('spy')}

``` ### From Content ```html

Getting started

${lorem}

Prerequisites

${lorem}

First steps

${lorem}

Going further

${lorem}

``` ## API Reference ### Properties - **active** (`string | undefined`) — The id of the active heading. Setting this puts the Outline in controlled mode and disables the built-in scroll-spy, so your own logic owns the highlight (mirrors providing activeId in other libraries). - **density** (`'default' | 'compact'`, default: `'default'`) — Tightens spacing for dense sidebars where vertical space is at a premium. - **for** (`string | undefined`) — DOM-scan mode: the id (or any CSS selector) of the content container whose headings should populate the outline. When set, slotted children are ignored and items are generated from the matched headings. - **heading-selector** (`string`, default: `'h1,h2,h3,h4'`) — The selector used to find headings when for is set. - **scroll-container** (`string | undefined`) — CSS selector for the element that scrolls the content, used as the scroll-spy IntersectionObserver root. Point this at your scroll container when the page scrolls inside an element rather than the window — otherwise the observer watches the window and never sees the headings move. If the selector resolves to a nord-scroll-area, its scroll viewport is used. When unset, the nearest ancestor nord-scroll-area of the scanned content is detected automatically, falling back to the window. - **hide-header** (`boolean`, default: `false`) — Hides the header. By default Outline shows a localized "On this page" heading (or the header slot's content) above the list. ### Events - **change** (`NordOutlineChangeEvent`) — Dispatched when the active section changes. Includes an activeId property. ### Slots - **(default)** — The default slot for Outline Item children. - **header** — Custom header content shown above the list. Overrides the default localized "On this page" heading. Set hide-header to remove the header entirely. ### CSS Custom Properties - `--n-outline-indicator-color` (default: `var(--n-color-accent)`) — Color of the sliding active indicator. - `--n-outline-track-color` (default: `var(--n-color-border)`) — Color of the static track behind the indicator. - `--n-outline-indicator-width` (default: `2px`) — Thickness of the track and indicator. - `--n-outline-indent` (default: `var(--n-space-m)`) — Indentation step applied per heading level. - `--n-outline-header-color` (default: `var(--n-color-text-weaker)`) — Color of the default header text. - `--n-outline-header-font-size` (default: `var(--n-font-size-s)`) — Font size of the default header text.