Application Builder - Multi-page header and footer elements

Multi-page header and footer elements allow you to create reusable containers that can be applied across multiple pages of your application.

This streamlines your workflow by allowing you to define a consistent structure once and apply it throughout your application. This not only saves time but also ensures design consistency.

Image: Baserow multipage header and footer

Overview

The header and footer elements are perfect for common page elements like navigation bars, branding, or footer information.

With the reusable design, you can apply the same header or footer to multiple pages, update it once, and changes reflect across all linked pages.

You can configure styling and layout using the element settings. For further details, refer to the element style customization guide.

Add a multi-page container

To add the multi-page header or multi-page footer to a page:

  1. Open the elements panel from the page editor interface.
  2. Scroll through the list or search for:
    • Multi-page header to add a reusable header: Add navigation menus, logos, or search bars to all pages.
    • Multi-page footer to add a reusable footer: Include contact information, links to privacy policies, or copyright text.
  3. Select to add the desired element to the page.

Configure the multi-page element

The header will automatically position itself at the top of the page. The footer will automatically position itself at the bottom of the page.

Once you’ve added the header or footer, you can customize how and where it appears.

Display settings

You have three options to configure visibility where headers or footers appear across your pages:

  1. On all pages

The element appears on every page within your application.

  1. Only on selected pages

You can choose specific pages where the element should appear. A list of all pages will be displayed for easy selection. For example, apply a footer only to specific content pages like About or Contact.

  1. Exclude selected pages

The element will appear on all pages except those you select. For example, exclude the header from a login page or a specialized landing page.

Steps to configure display settings

  1. Click on the Multi-page header or Multi-page footer element in the editor.
  2. Open the General settings panel.
  3. Under the Display section, choose one of the following display settings:
    • On all pages
    • Only on selected pages
    • Exclude selected pages
  4. For selective options, use the displayed list to check/uncheck pages as needed.

For more design control, combine multi-page headers/footers with elements like columns or buttons for dynamic layouts.

You can edit or update the multi-page elements at any time; changes are reflected across all pages where they are applied.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions—we’re ready to assist you.