Page header

Warning: This component will be deprecated in the future in favour of a spec compliant ai-page-header component

The page header component uses the last item in the `items` array as the title.

For conveninence we provide a `itemsWithTitle` function that will take an existing set of breadcrumb items and add one to the end to act as a title.

Example:

component.ts

    items = itemsWithTitle([
        {
            content: "one",
            href: "first link"
        },
        {
            content: "two",
            href: "second link"
        }
    ], "Hello World");

component.html

    <sc-page-header [items]="currentPath"></sc-page-header>

### Hierarchy

- PageHeaderComponent

## Index

### Inputs

- ariaLabel
- items
- onGrid

### Outputs

- navigation

### Constructors

- constructor

### Properties

- ariaLabel
- items
- navigation
- onGrid

### Accessors

- breadcrumbItems
- hasBreadcrumbs
- title

## Constructors

### constructor

- new PageHeaderComponent(): PageHeaderComponent

- #### Returns PageHeaderComponent

## Properties

### ariaLabel

@Input()
ariaLabel: string

- Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:77

Accessible label for the underlying `<nav></nav>` element that the breadcrumb items reside in

### items

@Input()
items: BreadcrumbItem[] = ...

- Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:71

Items to display in the header. The last item is used as the title

### navigation

@Output()
navigation: EventEmitter<Promise<boolean>> = ...

- Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:84

Emits the navigation status promise when the link is activated

(event forwarded from the underlying `ibm-breadcrumb`)

### onGrid

@HostBinding({"hostPropertyName":"'class.bx--row'"})
@Input()
onGrid: boolean = true

- Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:90

The page header sits on the grid by default. Set to `false` if you need to manually position the page header using the default padding values

## Accessors

### breadcrumbItems

- get breadcrumbItems(): BreadcrumbItem[]

- - Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:96

  #### Returns BreadcrumbItem[]

### hasBreadcrumbs

@HostBinding({"hostPropertyName":"'class.has-breadcrumbs'"})

- get hasBreadcrumbs(): boolean

- - Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:100

  #### Returns boolean

### title

- get title(): string

- - Defined in packages/angular/src/toolkit/page-header/page-header.component.ts:92

  #### Returns string

Generated using TypeDoc