Page

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

Complete example

export function PageHeaderComplete() {  return (    <div aria-label="A complete example of page header">      <ElPageHeader        onBack={() => notification("Back")}        breadcrumb={          <ElBreadcrumb separator="/">            <ElBreadcrumbItem to="./page-header.html">homepage</ElBreadcrumbItem>            <ElBreadcrumbItem>              <a className={styles.link} href="./page-header.html">route 1</a>            </ElBreadcrumbItem>            <ElBreadcrumbItem>route 2</ElBreadcrumbItem>          </ElBreadcrumb>        }        contentSlot={          <div style={flexRow}>            <ElAvatar size={32} src={AVATAR_IMG} style={{ marginRight: 12 }} />            <span style={titleStyle}>Title</span>            <span style={subtitleStyle}>Sub title</span>            <ElTag>Default</ElTag>          </div>        }        extra={          <div style={flexRow}>            <ElButton>Print</ElButton>            <ElButton type="primary">Edit</ElButton>          </div>        }      >        <ElDescriptions column={3} size="small" style={{ marginTop: 16 }}>          <ElDescriptionsItem label="Username">{" "}kooriookami{" "}</ElDescriptionsItem>          <ElDescriptionsItem label="Telephone">{" "}18100000000{" "}</ElDescriptionsItem>          <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>          <ElDescriptionsItem label="Remarks">            <ElTag size="small">School</ElTag>          </ElDescriptionsItem>          <ElDescriptionsItem label="Address">            {" "}No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province{" "}          </ElDescriptionsItem>        </ElDescriptions>        <p style={{ ...mainStyle, fontWeight: 400 }}>          Element Plus team uses <b>weekly</b> release strategy under normal          circumstance, but critical bug fixes would require hotfix so the actual          release number <b>could be</b> more than 1 per week.        </p>      </ElPageHeader>    </div>  );}

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 "" to get rid of it.

Breadcrumbs

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

export function PageHeaderBreadcrumb() {  return (    <ElPageHeader      contentSlot={<span style={titleStyle}>Title</span>}      breadcrumb={        <ElBreadcrumb separator="/">          <ElBreadcrumbItem to="./page-header.html">homepage</ElBreadcrumbItem>          <ElBreadcrumbItem>            <a className={styles.link} href="./page-header.html">route 1</a>          </ElBreadcrumbItem>          <ElBreadcrumbItem>route 2</ElBreadcrumbItem>        </ElBreadcrumb>      }    />  );}

Additional operation section

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

export function PageHeaderAdditionalSections() {  return (    <ElPageHeader      icon=""      contentSlot={        <div style={flexRow}>          <ElAvatar size={32} src={AVATAR_IMG} style={{ marginRight: 12 }} />          <span style={titleStyle}>Title</span>          <span style={subtitleStyle}>Sub title</span>          <ElTag>Default</ElTag>        </div>      }      extra={        <div style={flexRow}>          <ElButton>Print</ElButton>          <ElButton type="primary">Edit</ElButton>        </div>      }    />  );}

Main content

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

Your additional content can be added with default slot, You may put as many content as you want here.

export function PageHeaderMainContent() {  return (    <ElPageHeader contentSlot={<span style={titleStyle}>Title</span>}>      <div style={mainStyle}>        Your additional content can be added with default slot, You may put as        many content as you want here.      </div>    </ElPageHeader>  );}

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

Name	Description	Type	Default
icon	icon component of page header	`string` / `Component`	Back
title	main title of page header, default is Back that built-in a11y	`string`	''
content	content of page header	`string`	''

Events

Name	Description	Type
back	triggers when right side is clicked	`Function`

Slots

Name	Description
icon	content as icon
title	content as title
content	content
extra	extra
breadcrumb	content as breadcrumb
default	main content

Username kooriookami	Telephone 18100000000	PlaceSuzhou
RemarksSchool	Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Page Header