Page Header

[Rozerinay]

We willen graag meer leren over de Page Header component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Page Header

Doel

Consistente plek bovenaan elke pagina, vaak met een logo, navigatie en zoekfunctie.

Ook bekend als

Header

Gerelateerde componenten

Root, Body, Page Layout, Page Body, Page Footer, Navigation Bar

Gerelateerde patronen

Page Header - Meerstappenformulier

Onderzoek

Launching GOV.UK’s new menu bar - GOV.UK
Dit artikel gaat over verbeteringen in de navigatie op GOV.UK om overheidsinformatie en -diensten toegankelijker te maken. Het beschrijft de introductie van een consistente menu balk die gebruikers helpt informatie te vinden op basis van thema’s, organisaties en inhoudstypen, in plaats van complexe overheidsstructuren.

GOV.UK header - GOV.UK
Header implementatie bij GOV.UK. Bij de Header Discussion wordt meer informatie, onderzoek en aanpassingen gedeeld. Enkele interessante comments:

• Uit een onderzoek met 50 gebruikers bleek dat gebruikers moeite hadden met het vinden van navigatie-opties. Dit kwam doordat de navigatiebalk slecht te onderscheiden was van de koptekst, door dezelfde kleur- en achtergrondstijl, en doordat de koptekst verdween bij het scrollen. Een alternatieve layout met betere zichtbaarheid en uitlijning presteerde beter.
• Overweeg om ‘show or hide’ uit de toegankelijke naam te verwijderen en alleen ‘menu’ te gebruiken in combinatie met ‘aria-expanded’, aangezien dit al de juiste functionaliteit en status van de component weergeeft.

Utility Navigation: What It Is and How to Design It
Dit artikel bespreekt het belang van utility-navigatie, zoals functies voor contact, aanmelden, delen en printen, die secundaire acties ondersteunen. Hoewel de meeste functies van utility-navigatie van secundaire aard zijn, zijn ze belangrijk voor gebruikers in bepaalde situaties.

The Current State of Homepage and Category Navigation UX
Enkele interessante bevindingen:

• Uit tests bleek dat wanneer de huidige toplevel-scope niet werd gemarkeerd in de hoofdnavigatie, het onnodig moeilijk was voor deelnemers om te bepalen waar ze zich in de sitestructuur bevonden. Zelfs bij perfect geïmplementeerde breadcrumb navigation vertrouwen sommige gebruikers nog steeds op de hoofdnavigatie om snel te begrijpen waar ze zijn of om te bevestigen dat ze zich op de juiste plek bevinden.
• Onduidelijke navigatie is één van de belangrijkste redenen voor het verlaten van een website. Er wordt aanbevolen om het menu te verbeteren. Dit kun je doen door klikbare headers te gebruiken in je multilevelmenu, ervoor te zorgen dat gebruikers duidelijk weten waar ze zich in je menu bevinden en een kleine vertraging toe te voegen wanneer de gebruiker de muis over de drop-down items in de hoofdnavigatie beweegt.

Universal Navigation: Connecting Subsites to Main Sites - NN/g
Dit artikel bespreekt het belang van universele navigatie op grote websites met meerdere subsites, waarbij het gebruikers in staat stelt snel naar de hoofdpagina of andere gerelateerde sites te navigeren zonder de navigatie van de subsite te verstoren. En er worden ontwerpprincipes gedeeld om universele navigatie gebruiksvriendelijk te maken.

Navigation - Yaale
Dit artikel biedt richtlijnen voor het ontwerpen van navigatiemenu’s, zoals het gebruik van zichtbare koppen, toegankelijkheidspraktijken, en het implementeren van broodkruimels, koppen, en skip-links om de navigatie voor alle gebruikers te verbeteren.

Menu Structure - W3C
Informatie over hoe je een menustructuur toegankelijk opbouwt, met nadruk op het gebruik van semantische opmaak om de navigatie aanpasbaar te maken voor verschillende apparaten en hulpmiddelen voor toegankelijkheid.

How to set up an accessible page structure and navigation - pope.tech
Dit artikel bespreekt het belang van een toegankelijke paginstructuur en navigatie voor websites en geeft tips.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Default

For a sub-brand

With app name

With menu button

With links
Use a Page Menu to add links. A Page Menu in the Header should not wrap.

With links and menu button

With app name and menu button

With app name, links and menu button

---

Notities

• Onder de naam: Header.
• Kan bestaan uit een logo, applicatienaam, links en een menubutton.
• In de menubutton is het megamenu te vinden.
• Logo is standaard links uitgelijnd en rechts zijn de acties te vinden.
• Responsive gedrag: acties worden ondergebracht in de menubutton.
• Richtlijnen beschikbaar (Storybook).

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• Github

---

Screenshots / Varianten

Storybook

Figma
Logged out

Logged in

---

Notities

• Onder de naam: Header.
• Kan bestaan uit een logo, link, icon, button en menubutton.
• In de menubutton is het megamenu te vinden.
• Logo is standaard links uitgelijnd en rechts zijn de acties te vinden.
• Responsive gedrag: acties worden ondergebracht in de button.
• Richtlijnen beschikbaar (Figma).

[Rozerinay]

DSO

• Documentatie website
• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Default

User Home Active

With Button To Help

With Label

With Label And Label URL

With Label And Ribbon

With Link To Help

With Logo Url And Label and Label Url

With Ribbon

Responsive gedrag

---

Notities

• Onder de naam: Header.
• Kan bestaan uit een logo, link en button.
• Logo is standaard links uitgelijnd en rechts zijn de acties te vinden. Hieronder staat de navbar.
• Bij veel links in de navbar worden de laatste links ondergebracht in een 'Meer' button.
• Er kan worden gekozen voor een compacte header: hiermee verdwijnt de navbar.
• Responsive gedrag: acties worden ondergebracht in de button. In dit menu verschijnen de acties op een Non Modal Dialog.

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Responsive gedrag

---

Notities

• Onder de naam: Header.
• Bestaat uit een logo en naam van de website.
• Logo is standaard midden uitgelijnd.
• Responsive gedrag: acties worden ondergebracht in de button. In dit menu verschijnen de acties op een Non Modal Dialog.
• Richtlijnen beschikbaar.

[Rozerinay]

OpenGemeenten

Pattern Lab

---

Screenshots / Varianten

Pattern Lab

Responsive gedrag

---

Notities

• Onder de naam: Page Header.
• Kan bestaan uit een logo, links en een zoekbalk.
• Logo is standaard links uitgelijnd en rechts zijn de acties te vinden.
• Bij het aanklikken van de zoekbalk worden deze bovenop de acties geplaatst.
• Responsive gedrag: acties worden ondergebracht in een button.
• Het menu en de zoekbalk kunnen niet tegelijkertijd worden gebruikt op small containers.

[Rozerinay]

Rotterdam

• Figma
• GitHub

---

Screenshots / Varianten

Figma

---

Notities

• Onder de naam: Main.
• Kan bestaan uit een top bar, logo, links en een menu button.
• Logo is standaard links uitgelijnd en rechts zijn de acties te vinden. Hierboven staat de top bar.
• Responsive gedrag: acties worden ondergebracht in een button.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Storybook

Responsive gedrag

Figma

---

Notities

• Onder de naam: Header.
• Bestaat uit een logo en naam van de website.
• Logo is standaard midden uitgelijnd.
• Responsive gedrag: logo en naam van de website verkleinen.

[Rozerinay]

Utrecht

• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Responsive gedrag

---

Notities

• Onder de naam: Page Header.
• Bevat in het voorbeeld enkel de children 'Header content'.
• Kan bestaan uit een logo, navigatie, zoekveld, breadcrumb navigation, melding en cookie banner.
• Richtlijnen beschikbaar (Storybook).

[Rozerinay]

Rijksoverheid

Rijkshuisstijl

---

Screenshots / Varianten

De nieuwe Header van de Rijksoverheid.

Met kruimelpad

Uitklapmenu

---

Notities

• Onder de naam: Navigatie.
• Kan bestaan uit een logo, naam van platform, links, kruimelpad, zoekbutton en een menu button.
• In de menubutton is het megamenu te vinden.
• Logo is standaard midden uitgelijnd. Hieronder staan de links of het kruimelpad, samen met de zoekbutton.
• Responsive gedrag: bij default worden acties worden ondergebracht in een button. Bij de kruimelpad variant is er sprake van horizontale scroll. Zoekbutton blijft altijd rechts uitgelijnd.
• Richtlijnen beschikbaar.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Page Header op het Community bord

[eslook]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Page Header op het Candidate bord