In page navigation (in_page_nav)
The in-page navigation allows navigation to specific sections on a lengthy content page.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| content | Content | Page content. | |
| content_selector | data-main-content-selector | The element the component pulls headers from. Last part will be added to the main tag. |
|
| title_heading_level | data-title-heading-level | The heading level of the navigation title header. |
|
| title_text | data-title-text | The text of the navigation title header. |
|
| scroll_offset | data-scroll-offset | Number of pixels scroll should offset from the top of the parent element. |
|
| root_margin | data-root-margin | Observable margin around the observed root used for calculating the current active section. Use values similar to CSS margin. |
|
| threshold | data-threshold | Percentage of the scrolling section that must be in the observed area before the current section is triggered. Use a value between 0 and 1. |
|
id: in_page_nav
label: 'In page navigation'
description: 'The in-page navigation allows navigation to specific sections on a lengthy content page.'
group: Navigation
homepage: 'https://designsystem.digital.gov/components/in-page-navigation/'
slots:
content:
id: content
label: Content
description: 'Page content.'
props:
content_selector:
id: content_selector
label: data-main-content-selector
description: 'The element the component pulls headers from. Last part will be added to the main tag.'
schema:
type: string
title_heading_level:
id: title_heading_level
label: data-title-heading-level
description: 'The heading level of the navigation title header.'
schema:
type: integer
enum:
- 2
- 3
- 4
- 5
- 6
title_text:
id: title_text
label: data-title-text
description: 'The text of the navigation title header.'
schema:
type: string
scroll_offset:
id: scroll_offset
label: data-scroll-offset
description: 'Number of pixels scroll should offset from the top of the parent element.'
schema:
type: number
root_margin:
id: root_margin
label: data-root-margin
description: 'Observable margin around the observed root used for calculating the current active section. Use values similar to CSS margin.'
schema:
type: string
threshold:
id: threshold
label: data-threshold
description: 'Percentage of the scrolling section that must be in the observed area before the current section is triggered. Use a value between 0 and 1.'
schema:
type: number
examples:
preview:
id: preview
label: Preview
renderable:
'@component': in_page_nav