show next and previous page title in pagination instead of label

[faiz9068]

is there any method to show next and previous page title in pagination component instead of label ?

[HiDeoo]

👋 I'm assuming we are talking in the case of a page using the sidebar.label frontmatter field used to change the label for this page in the sidebar when displayed in an autogenerated group of links.

In this case, there is no built-in option to use the title only in the pagination links but keep the label in the sidebar. However, this is something achievable using component overrides which allow you to replace and customize the default components used by Starlight.

An override for the <Pagination> component could be created to update the label of pagination links to use the title of the associated page instead of the sidebar label. Here's a basic example of how such an override could be implemented:

---
// src/components/Pagination.astro
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Pagination.astro';
import { getEntry } from 'astro:content';

const { pagination } = Astro.props;

async function updatePaginationLink(link: Props['pagination']['next']) {
	if (!link) return link;
	if (!link.href.startsWith('/')) return link;

	// Get the slug of the prev/next page.
	const slug = link.href.replace(/^\//, '').replace(/(\/|\.html)$/, '');
	// Get the associated content collection entry.
	const entry = await getEntry('docs', slug ? slug : 'index');

	if (!entry) return link;

	// Update the label of the link with the title of the entry if it exists.
	return { ...link, label: entry.data.title };
}
---

<Default
	{...Astro.props}
	pagination={{
		prev: await updatePaginationLink(pagination.prev),
		next: await updatePaginationLink(pagination.next),
	}}><slot /></Default
>

You can find a working version of this override in this basic example I have setup on StackBlitz.

[faiz9068]

Thank you , this looks good compare to my version

this is how i am doing

---
/**
 * Custom Pagination Component for Starlight
 *
 * This component overrides Starlight's default pagination to show page titles
 * instead of sidebar labels. The default Starlight pagination uses the `label` property
 * from the sidebar configuration, which often contains abbreviated or shortened text.
 *
 * Key improvements:
 * 1. Shows complete page titles from the content's frontmatter
 * 2. Provides better context for users navigating between pages
 * 3. Maintains consistency with the actual page titles
 *
 * The component uses Astro's content collections API to fetch the actual page titles
 * by matching the URL paths. If a title cannot be found (e.g., for external links),
 * it falls back to the original label from the sidebar configuration.
 */

import { Icon } from "@astrojs/starlight/components";
import type { Props } from "@astrojs/starlight/props";
import { getCollection } from "astro:content";

const { dir, pagination } = Astro.props;
const { prev, next } = pagination;
const isRtl = dir === "rtl";

// Fetch all documents from the docs collection
const documentCollection = await getCollection("docs");

/**
 * Extracts and returns the page title from a given href
 * @param href - The URL path to the document (e.g., "/docs/getting-started/")
 * @returns The page title from the document's frontmatter or undefined if not found
 */
function getPageTitleFromHref(href: string): string | undefined {
  // Clean up the href by removing trailing and leading slashes
  const normalizedPath = href
    .split("/")
    .filter(Boolean) // Remove empty segments
    .join("/");

  // Search for the document in the collection by matching its ID
  const matchingDocument = documentCollection.find(
    (doc) => doc.id === normalizedPath,
  );

  // Return the document's title from frontmatter if found
  return matchingDocument?.data.title;
}
---

<div class="pagination-links print:hidden" dir={dir}>
  {
    prev && (
      <a href={prev.href} rel="prev">
        <Icon name={isRtl ? "right-arrow" : "left-arrow"} size="1.5rem" />
        <span>
          {Astro.locals.t("page.previousLink")}
          <br />
          <span class="link-title">
            {getPageTitleFromHref(prev.href) || prev.label}
          </span>
        </span>
      </a>
    )
  }
  {
    next && (
      <a href={next.href} rel="next">
        <Icon name={isRtl ? "left-arrow" : "right-arrow"} size="1.5rem" />
        <span>
          {Astro.locals.t("page.nextLink")}
          <br />
          <span class="link-title">
            {getPageTitleFromHref(next.href) || next.label}
          </span>
        </span>
      </a>
    )
  }
</div>

<style>
  .pagination-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1rem;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    flex-basis: calc(50% - 0.5rem);
    flex-grow: 1;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    padding: 1rem;
    text-decoration: none;
    color: var(--sl-color-gray-2);
    /* box-shadow: var(--sl-shadow-md); */
    overflow-wrap: anywhere;
  }
  [rel="next"] {
    justify-content: end;
    text-align: end;
    flex-direction: row-reverse;
  }
  a:hover {
    border-color: var(--sl-color-gray-2);
  }

  .link-title {
    color: var(--sl-color-white);
    font-size: var(--sl-text-2xl);
    line-height: var(--sl-line-height-headings);
  }

  svg {
    flex-shrink: 0;
  }
</style>

[HiDeoo]

Ah I see, this was already great progress 👏 I guess the key point is re-using Starlight built-in pagination component and only tweaking the data it's receiving. Re-using a component is something documented here and will definitely make the override process easier and more maintainable.

[faiz9068]

Ah I see, this was already great progress 👏 I guess the key point is re-using Starlight built-in pagination component and only tweaking the data it's receiving. Re-using a component is something documented here and will definitely make the override process easier and more maintainable.

Yes ,agree with you, I will update it, thank you