# El Page Header

> PageHeader component for page navigation headers. Invoke when user needs to create page headers with back navigation, breadcrumbs, or title sections.

- **Type:** Skill
- **Install:** `agentstack add skill-jiaiyan-element-plus-skills-el-page-header`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiaiyan](https://agentstack.voostack.com/s/jiaiyan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-page-header
- **Website:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

## Install

```sh
agentstack add skill-jiaiyan-element-plus-skills-el-page-header
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```vue

  
    
       Title 
    
  

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

```

## Complete Example

```vue

  
    
      
        Home
        Detail
      
    
    
       Title 
    
    
      Action
    
    
      Description content
    
  

```

## Custom Icon

```vue

  
    
      Custom Icon
    
  

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

```

## No Icon

```vue

  
    
      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](https://github.com/jiaiyan)
- **Source:** [jiaiyan/element-plus-skills](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiaiyan-element-plus-skills-el-page-header
- Seller: https://agentstack.voostack.com/s/jiaiyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.