Navigation
Page Nav
Previous and next document links with direction and titles
detent-page-nav
Port status
- Catalog status
- implemented
- Origin
- native-only
- Phase
- 6
- Wave
- native-only
- Group
- Navigation
3.5 KB gzip for the class module
Variants
Example labels only. The primary above the Variants heading renders both directions from property-only
PageLink data, the first row here hides the empty direction, and the second uses real slotted anchors
that win over the data and stay in the light DOM. There is no event: the links are native anchors.
Recorded states
hoverrecorded state; no setterfocus-visiblerecorded state; no setteremptyrecorded state; no setter
Usage
Import
import '/components/page-nav/define.js';
// or register it yourself
import { DetentPageNav } from '/components/page-nav/page-nav.js';Attributes
label
Properties
labelpreviousnext
Slots
previousnext
Events
No events are recorded for this component.
Example
Runnable example: site/examples/page-nav.ts. The snippet below is generated from the catalogued attributes.
<detent-page-nav
label="Page navigation"
></detent-page-nav>Property-only values
const element = document.querySelector('detent-page-nav');
if (element !== null) {
// previous: PageLink | null
element.previous = undefined;
// next: PageLink | null
element.next = undefined;
}Source
Native-only row: there is no upstream source. The native module lives at:
src/components/page-nav/page-nav.ts
Native files
The native module and its artifacts:
src/components/page-nav/page-nav.tssrc/components/page-nav/styles.csssrc/components/page-nav/define.tsdocs/components/page-nav.mdsite/examples/page-nav.tstests/browser/page-nav.spec.tsevidence/components/page-nav.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
label | label | string | 'Page navigation' | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
label | string | 'Page navigation' | Property-only: assign from script; not accepted as an attribute. |
previous | PageLink | null | null | Property-only: assign from script; not accepted as an attribute. |
next | PageLink | null | null | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
previous | Consumer content; rendered through a slot, never re-created. |
next | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- Native-only row: no upstream source file, no upstream route (docs/migration/native-only.md).
- Previous/next document navigation; upstream has only numbered pagination.
- Data is a plain object per direction, so the site can also slot real anchors for the no-JS path.
- href is validated against the platform URL allow-list (http/https/mailto/tel/relative/#fragment/protocol-relative); javascript:, data:, vbscript: and file: are refused into an inert anchor with data-refused="true" and one warning (R-3.1).
- Both directions empty collapses the nav (hidden) and sets data-empty="true" instead of rendering an empty landmark.
- URL validation is local to the component; when a second component needs it, it moves verbatim to src/lib/url-policy.ts (R-3.3). PageLink.label is the visible page label rendered in part="title"; an optional title becomes the anchor title attribute.
What it does
Rationale. Previous/next page links with a visible direction and page label, reusable by docs, wizards and steppers.
Upstream behaviour
- Renders previous and next links from plain data
- A slotted link wins over data and keeps its own semantics and focus
- Direction and page title are visible text
- Hides an empty direction and collapses when both are empty
- Native anchors only: no synthetic navigation and no event
- Static slotted content stays readable without JavaScript
Differences from upstream
- Native-only row: no upstream source file, no upstream route (docs/migration/native-only.md).
- Previous/next document navigation; upstream has only numbered pagination.
- Data is a plain object per direction, so the site can also slot real anchors for the no-JS path.
- href is validated against the platform URL allow-list (http/https/mailto/tel/relative/#fragment/protocol-relative); javascript:, data:, vbscript: and file: are refused into an inert anchor with data-refused="true" and one warning (R-3.1).
- Both directions empty collapses the nav (hidden) and sets data-empty="true" instead of rendering an empty landmark.
- URL validation is local to the component; when a second component needs it, it moves verbatim to src/lib/url-policy.ts (R-3.3). PageLink.label is the visible page label rendered in part="title"; an optional title becomes the anchor title attribute.