Customizing headers and footers

Headers and footers let you add useful information to the top and bottom of every page, like page numbers, document titles, or custom text.

Header and footer content

You can set a header and a footer for your document. Each can be a string or a function that returns a string. This allows you to display static or dynamic content, such as page numbers or document titles, at the top (header) or bottom (footer) of every page.

String templates with tokens

You can use a string for the header or footer. The following tokens are supported:

• {page}: Current page number
• {total}: Total number of pages

Example:

Pages.configure({
  header: 'My Project',
  footer: 'Page {page} of {total}',
})

Dynamic content (functions)

You can use a function to generate content based on the current page and total pages:

Pages.configure({
  header: (page, total) => `Section ${page}`,
  footer: (page, total) => `Page ${page} of ${total}`,
})

Example configuration

Here’s how you might configure both header and footer with dynamic content:

Pages.configure({
  header: (page, total) => `Document Title – Page ${page} of ${total}`,
  footer: (page, total) => page === 1 ? 'Confidential' : `Page ${page}`,
})

Best practices

Use headers for document titles or section names, and footers for page numbers or legal notes. Keep them short for best results.