--- title: Page Header 页头 --- # Page Header 页头 If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb. ## Complete example :::example page-header/complete ::: ## Basic usage Standard page header, for simply scenarios. :::example page-header/basic ::: ## Custom icon The default icon might not meet your satisfaction, you can customize the icon by setting `icon` attribute like the example. :::example page-header/custom-icon ::: ## 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. :::example page-header/no-icon ::: ## Breadcrumbs Page header allows you to add breadcrumbs for giving route information to the users by `breadcrumb` slot. :::example page-header/breadcrumb ::: ## Additional operation section The header can be as complicated as needed, you may add additional sections to the header, to allow rich interactions. :::example page-header/additional-sections ::: ## Main content Sometimes we want the head to show with some co-responding content, we can utilize the `default` slot for doing so. :::example page-header/main-content ::: ## Anatomy The component is consisted of these parts ```vue