Page Header #

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

Complete example #

Basic usage #

Standard page header, for simply scenarios.

Custom icon #

The default icon might not meet your satisfaction, you can customize the icon by setting icon attribute like the example.

No icon #

Sometimes the page is just full of elements, and you might not want the icon to show up on the page, you can set the icon attribute to null to get rid of it.

Breadcrumbs #

Page header allows you to add breadcrumbs for giving route information to the users by breadcrumb slot.

Additional operation section #

The header can be as complicated as needed, you may add additional sections to the header, to allow rich interactions.

Main content #

Sometimes we want the head to show with some co-responding content, we can utilize the default slot for doing so.

Anatomy #

The component is consisted of these parts

<template>
  <el-page-header>
    <!-- Line 1 -->
    <template #breadcrumb />
    <!-- Line 2 -->
    <template #icon />
    <template #title />
    <template #content />
    <template #extra />
    <!-- Lines after 2 -->
    <template #default />
  </el-page-header>
</template>

API #

Attributes #

Events #

Slots #