Add a header

Problem

You would like to add a persistent page header to one or more pages of your application.

Solution

1. In the Pages panel in the top-left, select the Page you’d like to update
2. Scroll down to the Header & Footer panel and find the Header component selector
3. Choose from an existing Component or create a new one
4. Repeat for each page you’d like your header to be on

Discussion

• Headers will be float using position: sticky over your page content, so you’ll probably want to select a background on the component you select. Semi-transparent backgrounds work.
• Your header is yours to design. Some suggested components include:
  • Text for your app’s title and user details
  • Navigation Bar for your app’s primary navigation
  • Media for your logo and profile picture
  • Container in stack mode to lay out left, center, and right sections
• The height of your component will become the height of the header on your page. Your header component will stretch to fill the width of the user’s viewport.
• If you want to access the current page title from your header component, you can use {{ $currentPage.title }}
• If you’d like a glassmorphic blur effect, use a background color with semi-transparency and add the following snippet to your header component’s Custom CSS:

::component {
  backdrop-filter: blur(16px);
}

See also

• Create a custom reusable component
• Add a footer
• Add a sidebar