N Page Header

Naive UI Page Header Component

Page header component with title, subtitle, navigation, and content slots.

When to Use

Use this component when:

• Page titles: Display page title with subtitle and navigation
• Back navigation: Provide back button for nested pages
• Page statistics: Show related statistics in header
• Page actions: Add action buttons in header area

When to Invoke

Invoke this skill when:

• User needs a page header with title
• User wants back navigation functionality
• User needs to display page-level statistics
• User wants to organize page header content

Features

• Back Navigation: Built-in back button with callback
• Flexible Slots: Multiple slots for customization
• Subtitle Support: Display subtitle text or slot
• Extra Content: Add extra content via prop or slot
• Footer Content: Add footer content for additional info

API Reference

PageHeader Props

PageHeader Slots

Basic Usage

Basic Page Header

<template>
  <n-page-header title="Page Title" subtitle="Page description">
    <template #extra>
      <n-button type="primary">Action</n-button>
    </template>
  </n-page-header>
</template>

With Back Navigation

<template>
  <n-page-header 
    title="Detail Page" 
    subtitle="View item details"
    @back="handleBack"
  >
    Content goes here
  </n-page-header>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const handleBack = () => {
  router.back()
}
</script>

With Statistics

<template>
  <n-page-header subtitle="A podcast to improve designs" @back="handleBack">
    <n-grid :cols="5">
      <n-gi>
        <n-statistic label="Episodes" value="125" />
      </n-gi>
      <n-gi>
        <n-statistic label="Guests" value="22" />
      </n-gi>
      <n-gi>
        <n-statistic label="Apologies" value="36" />
      </n-gi>
      <n-gi>
        <n-statistic label="Topics" value="83" />
      </n-gi>
      <n-gi>
        <n-statistic label="Reference Links" value="2,346" />
      </n-gi>
    </n-grid>
    <template #title>
      <a href="https://anyway.fm/" style="text-decoration: none; color: inherit">
        Anyway.FM
      </a>
    </template>
  </n-page-header>
</template>

Common Patterns

With Avatar

<template>
  <n-page-header title="User Profile" subtitle="View and edit profile">
    <template #avatar>
      <n-avatar :src="userAvatar" />
    </template>
    <template #extra>
      <n-button type="primary">Edit Profile</n-button>
    </template>
  </n-page-header>
</template>

With Breadcrumb

<template>
  <n-page-header title="Product Details" @back="handleBack">
    <template #header>
      <n-breadcrumb>
        <n-breadcrumb-item>Home</n-breadcrumb-item>
        <n-breadcrumb-item>Products</n-breadcrumb-item>
        <n-breadcrumb-item>Details</n-breadcrumb-item>
      </n-breadcrumb>
    </template>
  </n-page-header>
</template>

With Actions

<template>
  <n-page-header title="Document" subtitle="Edit document">
    <template #extra>
      <n-space>
        <n-button>Save Draft</n-button>
        <n-button type="primary">Publish</n-button>
      </n-space>
    </template>
    <template #footer>
      <n-space>
        <n-tag type="info">Draft</n-tag>
        <n-text depth="3">Last edited: 2 hours ago</n-text>
      </n-space>
    </template>
  </n-page-header>
</template>

Custom Back Icon

<template>
  <n-page-header title="Settings" @back="handleBack">
    <template #back>
      <n-icon :size="20">
        <ArrowLeftIcon />
      </n-icon>
    </template>
  </n-page-header>
</template>

With Tabs

<template>
  <n-page-header title="User Management" @back="handleBack">
    <template #footer>
      <n-tabs v-model:value="activeTab">
        <n-tab-pane name="list" tab="User List" />
        <n-tab-pane name="roles" tab="Roles" />
        <n-tab-pane name="permissions" tab="Permissions" />
      </n-tabs>
    </template>
  </n-page-header>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('list')
</script>

Form Page Header

<template>
  <n-page-header 
    title="Create New Order" 
    subtitle="Fill in the order details"
    @back="handleBack"
  >
    <template #extra>
      <n-space>
        <n-button @click="handleCancel">Cancel</n-button>
        <n-button type="primary" @click="handleSubmit">Submit</n-button>
      </n-space>
    </template>
    <n-form ref="formRef" :model="formData">
      <!-- Form content -->
    </n-form>
  </n-page-header>
</template>

Best Practices

1. Provide back handler: Always implement on-back for navigation

   <n-page-header title="Detail" @back="router.back()">
     Content
   </n-page-header>
   

2. Use slots for rich content: Use title/subtitle slots for complex content

   <n-page-header>
     <template #title>
       <a href="...">Link Title</a>
     </template>
   </n-page-header>
   

3. Add extra actions: Use extra slot for page-level actions

   <n-page-header title="Users">
     <template #extra>
       <n-button type="primary">Add User</n-button>
     </template>
   </n-page-header>
   

4. Show context in subtitle: Provide brief description in subtitle

   <n-page-header 
     title="Settings" 
     subtitle="Configure your application preferences"
   />
   

5. Use footer for tabs or filters: Footer slot is ideal for navigation tabs

   <n-page-header title="Dashboard">
     <template #footer>
       <n-tabs>...</n-tabs>
     </template>
   </n-page-header>
   

6. Consistent styling: Keep page header styling consistent across pages