# Page Header

> Top-of-page heading block with three projected slots — breadcrumbs, actions, extra (tags / metadata).

Source: https://ngwr.dev/reference/components/page-header  
Kind: Composite

## Installation

```angular-ts
import { WrPageHeader } from 'ngwr/page-header';

@Component({ imports: [WrPageHeader] })
export class MyComponent {}
```

## Basic

```angular-html
<wr-page-header title="Settings" subtitle="Manage your workspace">
  <div wrPageHeaderActions>
    <wr-btn>Invite</wr-btn>
    <wr-btn color="primary">Save</wr-btn>
  </div>
</wr-page-header>
```

## Narrow container (container query)

With `responsive`, the title + actions row stacks vertically when the header's own box is too narrow — a container query on its own width, not the viewport, so it adapts inside a split pane or sidebar even on a wide page. The box below is fixed at 380px.

```html
<div style="width: 380px"><wr-page-header responsive …>…</wr-page-header></div>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | Primary title shown as an h1. | `string` | `''` |
| `subtitle` | Secondary line below the title. | `string` | `''` |
| `responsive` | Stack the title and actions vertically when the header's own box is too narrow to sit them side by side (a container query on its own width, not the viewport — so it adapts inside a narrow column or split pane). | `boolean` | `false` |