Header & Footer

Header

Content wrapped in <Header> repeats at the top of every page. The header height is deducted from the page content area, so keep it compact.

React

import { Header, PageNumber } from "@press-js/react";

<Header>
  <div style={{ fontSize: "9pt", color: "#666", textAlign: "right" }}>
    Quarterly Report — Page <PageNumber />
  </div>
</Header>;

Vue

<script setup lang="ts">
  import { Header, PageNumber } from "@press-js/vue";
</script>

<template>
  <header>
    <div style="font-size: 9pt; color: #666; text-align: right">
      Quarterly Report — Page <PageNumber />
    </div>
  </header>
</template>

Props

Both className and style are supported for custom styling.

Native HTML API

<header data-press-header>
  <div style="font-size: 9pt; color: #666; text-align: right;">
    Quarterly Report — Page <span data-press-page-number></span>
  </div>
</header>

The component renders a <header data-press-header></header> element. Any <header> or <div> with the data-press-header attribute is recognized as a header by the pagination engine.

Footer

Content wrapped in <Footer> repeats at the bottom of every page. Same props and behavior as Header.

React

import { Footer, PageNumber, TotalPages } from "@press-js/react";

<Footer>
  <div style={{ textAlign: "center", fontSize: "9pt", color: "#666" }}>
    Page <PageNumber /> of <TotalPages />
  </div>
</Footer>;

Vue

<script setup lang="ts">
  import { Footer, PageNumber, TotalPages } from "@press-js/vue";
</script>

<template>
  <footer>
    <div style="text-align: center; font-size: 9pt; color: #666">
      Page <PageNumber /> of <TotalPages />
    </div>
  </footer>
</template>

Native HTML API

<footer data-press-footer>
  <div style="text-align: center; font-size: 9pt; color: #666;">
    Page <span data-press-page-number></span> of
    <span data-press-total-pages></span>
  </div>
</footer>

The component renders a <footer data-press-footer></footer> element. Any <footer> or <div> with the data-press-footer attribute works as a footer.

Usage notes

• Headers and footers are not part of the scrollable content area — they are excluded from pagination and repeated on every page.
• The pagination engine measures header and footer height from the rendered content. Keep them predictable (avoid variable-height content).
• You can combine multiple elements inside a header or footer (e.g., a logo on the left and page numbers on the right) using flexbox or absolute positioning.