`; pass an empty string to suppress. `TitleClass` `string?` `null` The eyebrow above the outline list. `ContainerClass` `string?` `null` The outer `data-role="page-outline"` container; `relative` stays hardcoded for marker positioning. `MarkerClass` `string?` `null` The moving highlight bar that tracks the active heading; `absolute` and `opacity-0` stay hardcoded — the script positions the bar and toggles its opacity. `ListClass` `string?` `null` The outline `

`. `LinkClass` `string?` `null` Emitted as `data-outline-link-class` and applied by the client-side script to each generated `

`, including its `data-selected=true` state styling. `NestedLinkClass` `string?` `null` Emitted as `data-outline-nested-link-class` and appended by the client-side script to nested (H3-level) outline links. ### Binding The component performs no server-side heading extraction. The outline list is populated at runtime by the companion client script in `Pennington.UI/wwwroot/`, which queries the element matched by `ContentSelector` and reads `data-content-selector`, `data-outline-link-class`, and `data-outline-nested-link-class` from the container. `NavigationInfo` is not consulted. No `RenderFragment` slots. ### Example ```razor ``` ## `Breadcrumb` ### Declaration ```razor:symbol @* Visible breadcrumb trail intended to live inside an article header. Pairs with the ImmutableList exposed by Pennington.Navigation.NavigationInfo (built by NavigationBuilder). Use TrailingContent for an "Edit on GitHub" link or other right-aligned chrome on the same line. *@ @using System.Collections.Immutable @using Pennington.Navigation @if (Items.Count > 0) {

The breadcrumb trail to render. Empty list renders nothing.

Items { get; set; } = []; ///

/// Optional content rendered on the trailing edge of the breadcrumb row /// (e.g. "Edit on GitHub" link). Pushed right via ml-auto. ///

[Parameter] public RenderFragment? TrailingContent { get; set; } } ``` Renders a visible breadcrumb trail inside an article header from the `ImmutableList` `NavigationBuilder` exposes via `NavigationInfo`. Each item links to its route except the last (which renders as a current-page ``); the trail renders nothing when the list is empty. `TrailingContent` supplies optional right-aligned chrome on the same row (an "Edit on GitHub" link, repository metadata). ### Parameters Name Type Default Description `Items` `ImmutableList` `[]` The breadcrumb trail to render. Empty list renders nothing. `TrailingContent` `RenderFragment?` `null` Optional content rendered on the trailing edge of the breadcrumb row; pushed right via `ml-auto`. ### Binding `Items` accepts the `ImmutableList` exposed as `NavigationInfo.Breadcrumbs`. The last item renders as the current page; every prior item with a `Route` renders as a link. `TrailingContent` is a `RenderFragment` slot for right-aligned chrome on the same row. ### Example ```razor Edit on GitHub ``` ## `Pagination` ### Declaration ```razor:symbol @* Prev / numbered / next pagination controls. Caller supplies the page-N URL via UrlFor — the component is URL-shape agnostic so it works for /archive/page/N/, /tags/{tag}/page/N/, /docs/page-N/, or anything else. Renders nothing when TotalPages <= 1. *@ @if (TotalPages > 1) {

@if (CurrentPage > 1) { Previous }

...
@slot.Page
@slot.Page

Page @CurrentPage of @TotalPages

@if (CurrentPage < TotalPages) { Next }

} @code { ///

1-based page index for the current view. Highlighted in the numbered list.

[Parameter] public int CurrentPage { get; set; } = 1; ///

Total number of pages. The component renders nothing when this is 1 or less.

[Parameter] public int TotalPages { get; set; } = 1; ///

/// Returns the URL for a given 1-based page index. The component never calls this with /// the current page, but callers should be prepared to map page 1 to the canonical /// (non-paginated) URL of the listing. ///

[Parameter] public Func UrlFor { get; set; } = page => $"?page={page}"; ///

/// Number of numeric page links flanking the current page in the truncated list. The /// first and last pages are always rendered; gaps between them and the window collapse /// to "...". Default of 1 yields windows like 1 ... 4 5 6 ... 12. ///

[Parameter] public int SiblingCount { get; set; } = 1; private IEnumerable BuildSlots() { if (TotalPages <= 1) { yield break; } var lo = Math.Max(2, CurrentPage - SiblingCount); var hi = Math.Min(TotalPages - 1, CurrentPage + SiblingCount); yield return new Slot(1, false); if (lo > 2) { yield return new Slot(0, true); } for (var p = lo; p <= hi; p++) { yield return new Slot(p, false); } if (hi < TotalPages - 1) { yield return new Slot(0, true); } if (TotalPages > 1) { yield return new Slot(TotalPages, false); } } private readonly record struct Slot(int Page, bool IsGap); } ``` Prev / numbered / next pagination controls. URL-pattern agnostic — the caller supplies a `Func` that maps a 1-based page index to a URL, so the same component drives `/archive/page/N/`, `/tags/{tag}/page/N/`, or any other pattern. Renders nothing when `TotalPages` is 1 or less. ### Parameters Name Type Default Description `CurrentPage` `int` `1` 1-based page index for the current view; highlighted in the numbered list. `TotalPages` `int` `1` Total number of pages. The component renders nothing when this is 1 or less. `UrlFor` `Func` `page => "?page={page}"` Returns the URL for a given 1-based page index. Callers should map page 1 to the canonical (non-paginated) URL of the listing. `SiblingCount` `int` `1` Number of numeric page links flanking the current page in the truncated list. The first and last pages are always rendered; gaps collapse to `...`. Default of 1 yields windows like `1 ... 4 5 6 ... 12`. ### Binding `Pagination` does not consult `NavigationInfo`. The caller supplies `CurrentPage` and `TotalPages` as plain integers and maps each 1-based page index to a URL through the `UrlFor` delegate, so the same component drives any paging URL shape. No `RenderFragment` slots. ### Example ```razor @{ string PageUrl(int page) => page == 1 ? "/archive/" : $"/archive/page/{page}/"; } ``` ## See also - How-to: [Customize the sidebar](https://usepennington.net/how-to/navigation/customize-sidebar.md) - Related reference: [Navigation types](https://usepennington.net/reference/api/navigation-builder.md) - Related reference: [Content components](https://usepennington.net/reference/ui/content.md) [Previous Code-block argument reference](https://usepennington.net/reference/markdown/code-block-args.md)[Next Content components](https://usepennington.net/reference/ui/content.md)