Page Header

AppPageHeader

A versatile page header component for displaying titles, descriptions, hero banners, avatars, and navigation at the top of a page. Supports responsive design with different layouts for mobile and desktop.

Preview

px

Props

Hero Configuration

heroUrl
string
Background image URL for the hero banner. When provided, the image is displayed with cover sizing.
heroFocalPoint
{ x: number, y: number }
Focal point for the hero background image positioning. Values are percentages (0-100).
heroGradient
string
Tailwind gradient classes applied to the hero background.
heroProvider
'localFiles'
NuxtImage provider for the hero image. Use 'localFiles' for local API endpoints.
showWavePattern
boolean
Shows a decorative wave SVG pattern overlay when no hero image is provided.

Avatar Configuration

avatarUrl
string
URL of the avatar image displayed in the content section.
avatarAlt
string
Alt text for the avatar image for accessibility.
avatarIcon
string
Fallback icon displayed when no avatar image is provided.
avatarProvider
'localFiles'
NuxtImage provider for the avatar image.
avatarBorder
boolean
Shows a white border around the avatar for better visibility.

Content Section

title
string required
Main title displayed in the header. This is the only required prop.
shortTitle
string
Shorter version of the title displayed on mobile devices.
subtitle
string
Secondary text displayed below the title.
subtitleIcon
string
Icon displayed before the subtitle text.

Navigation

navigationItems
AppHorizontalNavigationItem[]
Array of navigation items to display as horizontal tabs below the content.
navigationHighlight
boolean
Highlights the currently active navigation item.
injectMobileNavigation
boolean
Automatically injects navigation items into the mobile header navigation via useHeaderNavigation().

Customization

ui
object
Custom CSS classes for component parts. Supports: root, card, hero, content, navigation.

Slots

actions
Action buttons or controls displayed on the right side of the title. Commonly used for edit buttons, settings, or context menus.
navigation
Custom navigation content. Overrides the default AppHorizontalNavigation when used.
hero-overlay
Content overlaid on the hero banner. Useful for badges, status indicators, or decorative elements.
avatar
Custom avatar content. Replaces the default UAvatar component.
subtitle
Custom subtitle content. Replaces the default subtitle paragraph when more complex content is needed.

Examples

Basic Usage 

<AppPageHeader
  title="Page Title"
  subtitle="A short description"
  subtitle-icon="i-lucide-info"
>
  <template #actions>
    <UButton icon="i-lucide-pencil">Edit</UButton>
  </template>
</AppPageHeader>

With Navigation 

<AppPageHeader
  title="Club Name"
  :navigation-items="[
    { label: 'Overview', to: '/club/overview' },
    { label: 'Events', to: '/club/events' },
    { label: 'Members', to: '/club/members' },
  ]"
/>