# Header: Stacked
The header sits above the content instead of lying on top of it: a note on top, the bar with brand, navigation and meta actions in the middle, and a row of category navigation below. The menu opens a drilldown with the site navigation.
- **Type:** Pattern
- **Components:** [`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-link-pure`](../../../components/p-link-pure/p-link-pure.md), [`p-tabs-bar`](../../../components/p-tabs-bar/p-tabs-bar.md), [`p-text`](../../../components/p-text/p-text.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;
});
```
