Interactive Headers & Footers | Header & Footer

You can make headers and footers interactive by adding click callbacks. This allows you to handle user interactions, create navigation, or trigger custom actions when users click on headers or footers.

Configuration

Add onHeaderClick and onFooterClick callback functions to handle clicks:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { PaginationPlus } from 'tiptap-pagination-plus'

const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      headerLeft: "Document Title",
      headerRight: "Page {page}",
      footerLeft: "Confidential",
      footerRight: "Page {page}",

      // Handle header clicks
      onHeaderClick: ({ event, pageNumber }) => {
        console.log(`Header clicked on page ${pageNumber}`)
        // Your custom logic here
      },

      // Handle footer clicks
      onFooterClick: ({ event, pageNumber }) => {
        console.log(`Footer clicked on page ${pageNumber}`)
        // Your custom logic here
      }
    }),
  ],
})

Callback Parameters

Both callbacks receive an object with two properties:

• event: The MouseEvent object from the click
• pageNumber: The page number where the click occurred

onHeaderClick: ({ event, pageNumber }) => {
  // event: MouseEvent - The original click event
  // pageNumber: number - The page number (1, 2, 3, etc.)
}

Examples

Navigation Example

PaginationPlus.configure({
  headerLeft: "Click to go to top",
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    // Scroll to top of document
    window.scrollTo({ top: 0, behavior: 'smooth' })
  },

  onFooterClick: ({ event, pageNumber }) => {
    // Navigate to table of contents
    console.log(`Navigate to TOC from page ${pageNumber}`)
  }
})

Page Information Modal

PaginationPlus.configure({
  footerRight: "Page {page} - Click for info",

  onFooterClick: ({ event, pageNumber }) => {
    // Show page information
    alert(`You are on page ${pageNumber}`)
  }
})

Custom Actions

PaginationPlus.configure({
  headerLeft: "📋 Click to copy page",
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    // Copy page number to clipboard
    navigator.clipboard.writeText(`Page ${pageNumber}`)
    console.log(`Page ${pageNumber} copied to clipboard`)
  }
})

Prevent Default Behavior

PaginationPlus.configure({
  headerLeft: "Click me",
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    // Prevent default behavior if needed
    event.preventDefault()

    // Your custom logic
    console.log(`Custom action on page ${pageNumber}`)
  }
})

Different Actions Per Page

PaginationPlus.configure({
  headerLeft: "Interactive Header",
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    switch(pageNumber) {
      case 1:
        // Action for first page
        console.log('First page clicked')
        break
      case 2:
        // Action for second page
        console.log('Second page clicked')
        break
      default:
        // Default action
        console.log(`Page ${pageNumber} clicked`)
    }
  }
})

Rich Interactive Headers

PaginationPlus.configure({
  headerLeft: `<button style="cursor: pointer; padding: 5px 10px; background: #2563eb; color: white; border: none; border-radius: 4px;">Click Me</button>`,
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    // Handle button click
    if (event.target.tagName === 'BUTTON') {
      alert(`Button clicked on page ${pageNumber}`)
    }
  }
})

Use Cases

Navigation

• Scroll to top when header is clicked
• Navigate to table of contents
• Jump to specific sections

Information Display

• Show page metadata
• Display document statistics
• Show help tooltips

User Actions

• Copy page information
• Share specific pages
• Print current page
• Export page content

Interactive Elements

• Toggle document settings
• Switch themes
• Show/hide annotations

Configuration Options

Option	Type	Description
onHeaderClick	(params: { event: MouseEvent, pageNumber: number }) => void	Callback function when header is clicked
onFooterClick	(params: { event: MouseEvent, pageNumber: number }) => void	Callback function when footer is clicked

Best Practices

1. Visual Feedback: Make it clear that headers/footers are clickable (use cursor: pointer, hover effects)
2. Meaningful Actions: Ensure clicks perform useful actions
3. Event Handling: Use event.preventDefault() if you need to prevent default behavior
4. User Experience: Provide feedback after actions (toasts, alerts, visual changes)
5. Accessibility: Consider keyboard navigation and screen readers

Styling Interactive Elements

You can style headers/footers to indicate they’re clickable:

PaginationPlus.configure({
  headerLeft: `<span style="cursor: pointer; text-decoration: underline; color: #2563eb;">Click me</span>`,
  headerRight: "Page {page}",

  onHeaderClick: ({ event, pageNumber }) => {
    console.log(`Clicked on page ${pageNumber}`)
  }
})

Related Topics

• Basic Usage - Learn the basics of header/footer configuration
• Per-Page Customization - Customize headers/footers for specific pages
• Rich Text Support - Style interactive elements with HTML
• Complete Examples - See interactive examples in action