n-page-header

name	n-page-header
description	Page header component for page titles with navigation and content slots. Invoke when user needs page headers, breadcrumb navigation, or page title sections in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

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

Name	Type	Default	Description
extra	string	undefined	Extra text information (overwritten by extra slot).
subtitle	string	undefined	Subtitle text.
title	string	undefined	Title text.
on-back	() => void	undefined	Callback when back button is pressed.

PageHeader Slots

Name	Parameters	Description
avatar	()	Avatar/image slot.
header	()	Header content slot.
default	()	Main content area.
extra	()	Extra information slot.
footer	()	Footer content slot.
subtitle	()	Subtitle content slot.
title	()	Title content slot.
back	()	Custom back icon slot.

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