element-plus/website/docs/en-US/page-header.md

## PageHeader

If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.

### Basic usage

:::demo
```html
<el-page-header @back="goBack" content="detail">
</el-page-header>

<script>
  export default {
    methods: {
      goBack() {
        console.log('go back');
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';

  export default defineComponent({
    setup() {
      const goBack = () => {
        console.log('go back');
      };

      return {
        goBack,
      };
    },
  });

</setup>
-->
```
:::

### Custom icon

:::demo
```html
<el-page-header icon="el-icon-arrow-left" content="detail"></el-page-header>
```
:::

### Attributes
| Attribute | Description   | Type      | Accepted Values               | Default |
|---------- |-------------- |---------- |------------------------------ | ------ |
| icon     |  icon    | string    |  —                            | el-icon-back   |
| title     | main title    | string    |  —                            | Back   |
| content   | content       | string    |  —                            | —      |

### Events
| Event Name | Description   | Parameters |
|----------- |-------------- |----------- |
| back       | triggers when right side is clicked | — |

### Slots
| Name      | Description            |
|---------- | ---------------------- |
| icon     | custom icon          |
| title     | title content          |
| content   | content                |