El Page Header

PageHeader Component

PageHeader provides a header section with back navigation and content areas.

When to Use

• Page headers
• Back navigation
• Breadcrumb integration
• Page title sections

Basic Usage

  
    
       Title 
    
  

const goBack = () => {
  console.log('Go back')
}

Complete Example

  
    
      
        Home
        Detail
      
    
    
       Title 
    
    
      Action
    
    
      Description content
    
  

Custom Icon

  
    
      Custom Icon
    
  

import { ArrowLeft } from '@element-plus/icons-vue'

No Icon

  
    
      No Icon
    
  

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | icon | Icon component | string \| Component | Back | | title | Main title | string | '' | | content | Content text | string | '' |

Events

| Name | Description | Type | |------|-------------|------| | back | Back button clicked | () => void |

Slots

| Name | Description | |------|-------------| | icon | Custom icon | | title | Custom title | | content | Custom content | | extra | Extra section | | breadcrumb | Breadcrumb section | | default | Main content |

Best Practices

1. Use breadcrumb slot for navigation paths
2. Use extra slot for action buttons
3. Use default slot for page content

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.