Header & Footer

Headers and footers that repeat on every page of a section.

<Section>
  <Section.Header>
    <Paragraph>My Document</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph>Page <PageNumber /></Paragraph>
  </Section.Footer>

  <Paragraph>Content goes here...</Paragraph>
</Section>

Components

Component	Description
`Section.Header`	Content at the top of the section’s pages
`Section.Footer`	Content at the bottom of the section’s pages
`PageNumber`	Dynamic page number field

Basic usage

Header only

<Section>
  <Section.Header>
    <Paragraph className="text-gray-500 text-sm">
      Company Report 2024
    </Paragraph>
  </Section.Header>

  <H1>Introduction</H1>
  <Paragraph>...</Paragraph>
</Section>

<Section>
  <Section.Footer>
    <Paragraph className="text-center text-xs text-gray-400">
      Confidential
    </Paragraph>
  </Section.Footer>

  <H1>Introduction</H1>
  <Paragraph>...</Paragraph>
</Section>

Both

<Section>
  <Section.Header>
    <Paragraph className="text-right">Quarterly Report</Paragraph>
  </Section.Header>

  <Section.Footer>
    <Paragraph className="text-center">
      Page <PageNumber />
    </Paragraph>
  </Section.Footer>

  <H1>Q4 Results</H1>
  <Paragraph>...</Paragraph>
</Section>

Page numbers

The PageNumber component inserts dynamic page numbers.

Current page

<PageNumber />
// or
<PageNumber type="current" />

Outputs: 1, 2, 3…

Total pages

<PageNumber type="total" />

Outputs the total page count.

Both (current of total)

<PageNumber type="both" />

Outputs: “Page 1 of 10”

Custom format

<PageNumber format="{current} / {total}" />

Outputs: “1 / 10”

<PageNumber format="- {current} -" />

Outputs: ”- 1 -“

Styling

Headers and footers support Tailwind classes and inherit text classes from their Section and Document. They accept the same content as a section: paragraphs, headings, tables, lists and images.

Right-aligned header

<Section.Header>
  <Paragraph className="text-right text-sm text-gray-500">
    Document Title
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs text-gray-400">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

Multiple lines

<Section.Header>
  <Paragraph className="font-bold">ACME Corporation</Paragraph>
  <Paragraph className="text-sm text-gray-500">
    Annual Report 2024
  </Paragraph>
</Section.Header>

Control distance from page edge with margin options:

<Section
  margins={{
    top: "1in",
    bottom: "1in",
    header: "0.5in",  // Distance from top edge to header
    footer: "0.5in",  // Distance from bottom edge to footer
  }}
>
  <Section.Header>...</Section.Header>
  <Section.Footer>...</Section.Footer>
</Section>

First and even pages

type chooses the pages a header or footer appears on:

<Section>
  <Section.Header type="first">
    {/* Cover page: no running header */}
    <Paragraph />
  </Section.Header>
  <Section.Header>
    <Paragraph className="text-right text-xs">Report RF-2026-0147</Paragraph>
  </Section.Header>
  <Section.Footer type="even">
    <Paragraph>
      <PageNumber />
    </Paragraph>
  </Section.Footer>
  <Section.Footer>
    <Paragraph className="text-right">
      <PageNumber />
    </Paragraph>
  </Section.Footer>
  ...
</Section>

`type`	Pages
`"default"`	All pages not covered by another type (default)
`"first"`	The section’s first page
`"even"`	Even pages; odd pages use the default

A section may have one header and one footer of each type. When a section defines only some types, pages of the missing types use the default header or footer (Word itself would leave them blank).

Allowed content

Headers and footers accept the same content as a section: paragraphs, headings, lists, tables and images. Text classes on the Section and Document apply inside them.

Common patterns

Document title + page number

<Section.Header>
  <Paragraph className="text-sm text-gray-500">
    Project Proposal
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-center text-xs">
    <PageNumber type="both" />
  </Paragraph>
</Section.Footer>

Company branding

<Section.Header>
  <Paragraph>
    <Text className="font-bold">ACME Corp</Text>
    <Text className="text-gray-500"> | Internal Document</Text>
  </Paragraph>
</Section.Header>

<Section.Footer>
  <Paragraph className="text-xs text-gray-400 text-center">
    Confidential - Do not distribute
  </Paragraph>
  <Paragraph className="text-xs text-gray-400 text-center">
    Page <PageNumber /> of <PageNumber type="total" />
  </Paragraph>
</Section.Footer>

Left and right aligned (using tabs)

<Section.Footer>
  <Paragraph>
    Confidential<Tab /><Tab /><Tab />Page <PageNumber />
  </Paragraph>
</Section.Footer>

Different headers per section

Each section has its own header/footer. Use multiple sections for different headers:

<Document>
  {/* Title page - no header/footer */}
  <Section>
    <H1 className="text-center mt-48">Annual Report</H1>
    <Paragraph className="text-center">2024</Paragraph>
  </Section>

  {/* Main content - with header/footer */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Annual Report 2024</Paragraph>
    </Section.Header>

    <Section.Footer>
      <Paragraph className="text-center">
        <PageNumber type="both" />
      </Paragraph>
    </Section.Footer>

    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>
  </Section>

  {/* Appendix - different header */}
  <Section>
    <Section.Header>
      <Paragraph className="text-gray-500">Appendix</Paragraph>
    </Section.Header>

    <H1>Appendix A: Data Tables</H1>
    <Table>...</Table>
  </Section>
</Document>

Full example

import {
  render,
  Document,
  Section,
  H1,
  H2,
  Paragraph,
  Text,
  PageNumber,
} from "@cordel/react-docx";

const Report = () => (
  <Document>
    <Section
      margins={{
        top: "1in",
        bottom: "1in",
        left: "1.25in",
        right: "1in",
        header: "0.5in",
        footer: "0.5in",
      }}
    >
      <Section.Header>
        <Paragraph className="text-right text-sm text-gray-500">
          <Text className="font-bold">ACME Corp</Text> - Q4 Report
        </Paragraph>
      </Section.Header>

      <Section.Footer>
        <Paragraph className="text-center text-xs text-gray-400">
          Confidential | Page <PageNumber /> of <PageNumber type="total" />
        </Paragraph>
      </Section.Footer>

      <H1>Quarterly Report</H1>
      <Paragraph>
        This report summarizes Q4 2024 performance...
      </Paragraph>

      <H2>Financial Highlights</H2>
      <Paragraph>
        Revenue increased by 15% compared to Q3...
      </Paragraph>
    </Section>
  </Document>
);

await render(<Report />, "./report.docx");

Getting started

Components

Components

Basic usage

Header only

Footer only

Both

Page numbers

Current page

Total pages

Both (current of total)

Custom format

Styling

Right-aligned header

Centered footer with styling

Multiple lines

Header/footer spacing

First and even pages

Allowed content

Common patterns

Document title + page number

Company branding

Legal footer

Left and right aligned (using tabs)

Different headers per section

Full example

​Components

​Basic usage

​Header only

​Footer only

​Both

​Page numbers

​Current page

​Total pages

​Both (current of total)

​Custom format

​Styling

​Right-aligned header

​Centered footer with styling

​Multiple lines

​Header/footer spacing

​First and even pages

​Allowed content

​Common patterns

​Document title + page number

​Company branding

​Legal footer

​Left and right aligned (using tabs)

​Different headers per section

​Full example

Components

Basic usage

Header only

Footer only

Both

Page numbers

Current page

Total pages

Both (current of total)

Custom format

Styling

Right-aligned header

Centered footer with styling

Multiple lines

Header/footer spacing

First and even pages

Allowed content

Common patterns

Document title + page number

Company branding

Legal footer

Left and right aligned (using tabs)

Different headers per section

Full example