# Header: Overlay
The header lies on top of the content, typically a full-bleed hero image or video, and is reduced to a single row with brand, navigation and meta actions. The menu opens a drilldown with the site navigation.
- **Type:** Pattern
- **Components:** [`p-button`](../../../components/p-button/p-button.md), [`p-button-pure`](../../../components/p-button-pure/p-button-pure.md), [`p-crest`](../../../components/p-crest/p-crest.md), [`p-drilldown`](../../../components/p-drilldown/p-drilldown.md), [`p-heading`](../../../components/p-heading/p-heading.md), [`p-wordmark`](../../../components/p-wordmark/p-wordmark.md)
- **Conventions and stylesheet:** shared by all examples, see [examples.md](../../../examples.md)
## Markup
```html
```
## Script
```js
// DO NOT USE IN PRODUCTION!
// EXAMPLE CODE FOR DEMONSTRATION PURPOSE ONLY.
// Behaviour of the header navigation: the menu button opens the drilldown, and the drilldown reports the level
// the user drilled into.
const navButton = document.getElementById('nav-button');
const navDrilldown = document.getElementById('nav-drilldown');
navButton.addEventListener('click', () => {
navDrilldown.open = true;
});
// Closing is requested by the component (Escape, the close button, a click on the backdrop) – the open state is
// owned by the page, so it has to be written back.
navDrilldown.addEventListener('dismiss', (e) => {
e.target.open = false;
});
navDrilldown.addEventListener('update', (e) => {
e.target.activeIdentifier = e.detail.activeIdentifier;
});
// Behaviour of the hero video: a pause control that follows the actual state of the video.
const video = document.getElementById('hero-video');
const pauseButton = document.getElementById('pause-button');
// The button hides its label, so its text content is its accessible name – it has to follow the actual state of
// the video, not the last click. Deriving it from the media events also covers autoplay being refused by the
// browser.
const syncPauseButton = () => {
pauseButton.textContent = video.paused ? 'Play Video' : 'Pause Video';
pauseButton.icon = video.paused ? 'play' : 'pause';
};
video.addEventListener('play', syncPauseButton);
video.addEventListener('pause', syncPauseButton);
pauseButton.addEventListener('click', () => {
video[video.paused ? 'play' : 'pause']();
});
// WCAG 2.2: an animation that starts on its own must be stoppable – and it must not start at all when the
// operating system was asked for reduced motion.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
video.autoplay = false;
video.pause();
}
syncPauseButton();
```