# `m-page-header`

The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `title*` | Main title displayed in the page header. | `string` |   |
| `shadow` | Enables a drop shadow under the page header. | `boolean` |   |
| `backbutton` | Displays a back icon button in the header. | `boolean` |   |
| `status` | Component status. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` |   |
| `statuslabel` | Label text displayed inside the status badge. | `string` |   |
| `extrainfo` | Additional information text shown below the title. | `string` |   |
| `onBack` | The callback triggered on click on back button. | `() => void` |   |
| `onTogglemenu` | The callback triggered on click on menu button. | `() => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `content` | Use this slot to insert any content below the Page Header top content. |
| `actions` | Use this slot to insert action items in the top content. |
| `tabs` | Use this slot to insert a tab in the header. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `back` | Emits when the back button is clicked. | `CustomEvent<void>` |
| `toggle-menu` | Emits when the burger menu button is clicked. | `CustomEvent<void>` |

