Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
TableOfContent.Root#
| Type | Default value | Description | |
|---|---|---|---|
children | React.ReactNode | Nested TableOfContent.Item elements. Fragments and memoized items are supported. Use Data for generated content. | |
title | React.ReactNode | "On this page" | Visible title and default accessible name. Translated through locale or the Provider locale. |
locale | string | Language of the built-in title and show-all label. Overrides the Provider locale for this navigation only. Also sets its lang attribute unless lang is supplied. Custom titles and accessible names take precedence. | |
currentId | string null | Controlled current section id. Omit to detect it while scrolling. Set null to clear it. A section below maxDepth marks its nearest visible ancestor. | |
currentSectionOffset | number | 0 | Distance in pixels from the viewport top where a heading becomes current. Match the height of your sticky header. |
maxDepth | number | 2 | Number of visible levels, starting at the highest heading level below h1. Deeper headings remain tracked. |
maxVisibleItems | number | 10 | Maximum number of links initially shown below the breakpoint, including nested links and an included page title. Set 0 to show every link. Desktop always shows all links. |
breakpoint | "small" "medium" "large" "x-large" "xx-large" | "large" | Eufemia breakpoint above which the navigation is always expanded. At or below it, a disclosure button controls the list. Defaults to large (72em, normally 1152px); Provider breakpoint overrides are respected. |
styleNonce | string | CSP nonce for the inline styles used before hydration. | |
stretch | boolean | false | Use the available width. Otherwise the expanded sidebar is 12rem wide. |
sticky | boolean | true | Keep the desktop navigation visible while its containing content scrolls. Set false when the application positions it. |
stickyOffset | number string | 0 | Distance from the top of the scroll container. Numbers use pixels; strings accept CSS lengths. |
animateChanges | boolean | false | Animate heading-list changes with a short fade and staggered slide from the left. Initial rendering, section selection and collapsed lists are not animated. Respects reduced motion. |
expanded | boolean | Controlled disclosure state below the breakpoint. | |
defaultExpanded | boolean | false | Initial disclosure state below the breakpoint. |
expandedStorageKey | string | Storage key used to remember the disclosure state across navigation and reloads. Stored booleans override defaultExpanded. Controlled expanded does not read or write storage. | |
expandedStorage | "session" "local" | "session" | Storage used with expandedStorageKey. Session storage is recommended for navigation UI state. |
ref | React.Ref<HTMLElement> | Reference to the navigation element. | |
[HTML attributes] | Various | Standard nav attributes, including className, style, aria-label and aria-labelledby. A supplied accessible name takes precedence over the visible title. | |
[Space properties] | Various | Supports spacing properties. |
TableOfContent.Data#
| Type | Default value | Description | |
|---|---|---|---|
data | Array<TableOfContentSection> | REQUIRED | Flat array of { id, text, level } in document order. Ids identify existing destinations and must be unique on the page. Text accepts inline React content. Level is the heading level from 1 to 6; h1 headings are tracked and shown when includeH1 is enabled. |
[Root properties] | Various | Supports TableOfContent.Root properties except children. | |
includeH1 | boolean | false | Include level-1 page titles as links before their sections, without adding indentation or counting toward maxDepth. |
TableOfContent.Item#
| Type | Default value | Description | |
|---|---|---|---|
id | string | REQUIRED | Unique id of the heading or section to navigate to. It is not applied to the list item. |
text | React.ReactNode | REQUIRED | Readable link label. Supports inline formatting such as code. Avoid interactive content inside labels. |
children | React.ReactNode | Nested TableOfContent.Item elements. | |
[HTML attributes] | Various | Standard list-item attributes, including className and style. |
TableOfContentPreHydrationScript#
Import this helper from @dnb/eufemia/extensions/table-of-content/TableOfContentPreHydrationScript. It restores the saved disclosure styling before first paint in SSR and static pages. Place it after the navigation markup and before application hydration. It accepts standard script attributes, including nonce, except children and dangerouslySetInnerHTML.
The same module exports getPreHydrationScript for HTML templates assembled outside React. See disclosure persistence for placement and usage.
Translations#
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
TableOfContent.showAll | Vis alle | Show all | Visa alla | Vis alle |
TableOfContent.title | På denne siden | On this page | På den här sidan | På denne side |