Component: Navigation bar

[Rozerinay]

We willen graag meer leren over het Navigation bar 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 het 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

Navigation bar

Doel

Toont een hiërarchische horizontale navigatie aan de bovenkant van een pagina en biedt de mogelijkheid om tussen pagina’s te navigeren.

Ook bekend als

Navbar

Gerelateerde componenten

Side navigation

Onderzoek

Menu-Design Checklist: 17 UX Guidelines - NN Group
Artikel waarin best practices worden gedeeld over het ontwerpen van een menu.

‘Main Navigation’ Design Examples - Baymard Institute
Onderzoek toont aan dat op hover gebaseerde menu's (ook wel 'megamenu's' genoemd) worden momenteel gebruikt als hoofdnavigatie op 88% van alle Amerikaanse e-commercesites. Toch blijkt uit hun onderzoeken dat megamenu's de grootst mogelijke aandacht vereisen voor interactiedetails als ze moeten goed presteren voor gebruikers.

Navigation: You Are Here - NN Group
Artikel dat dieper ingaat op het weergeven van een visuele indicator voor de huidige pagina.

How Many Items in a Navigation Menu? - NN Group
Video waarin wordt uitgelegd dat er geen maximum van 7 menu-items nodig is, ondanks een veelvoorkomende mythe.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default
Standaard menu items die aan de linkerkant worden uitgelijnd.

Alignment
Menu items die ten opzichte van de Default variant aan de rechterkant worden uitgelijnd.

Wrapping
Maakt het mogelijk om de menu items over meerdere regels te laten lopen.

Figma

States

Website
Amsterdam.nl

Onderzoek.amsterdam.nl

---

Notities

• Onder de naam Page Menu (en zal Navigation bar heten).
• Het page menu item bestaat uit het Page menu link component.
• Is een unordered list.
• Uitwerking in Storybook en Figma verschilt van de website, omdat het design system nog niet wordt gebruikt voor de website.
• Menu items kunnen over meerdere regels worden verspreid.
• Documentatie beschikbaar.

[VincentSmedinga]

Hoi Rozerin, de huidige amsterdam.nl gebruikt het design system nog helemaal niet. Er is een volledig nieuwe website onderweg die dat wel doet.

Goed om te weten dat dit component Navigation Bar heet – we waren al op zoek naar iets beters dan Page Menu. (Aanvankelijk hadden we ook Page Grid, Page Header, Page Footer en we dachten alles op dit niveau te groeperen.) We nemen deze naam over.

Het Page Menu Link component dat je noemt is een lokaal subcomponent, dus niet hetzelfde als de generieke Link.

[Rozerinay]

@VincentSmedinga heel erg bedankt voor je input! Ik heb de notities aangepast op basis van je opmerkingen. Goed om dit allemaal te weten.

[Rozerinay]

Den Haag

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default
Standaard state waarbij je de menu button kunt gebruiken om te navigeren naar een pagina of een menu te openen.

Active
De state wanneer de gebruiker zich op die pagina bevindt.

Figma - Huidig

Desktop
Bij desktop view zijn de volgende varianten aanwezig: default, icon right, icon left, icon only.

Mobile
Bij mobile view zijn er geen varianten.

Website

---

Notities

• Onder de naam Menu in Storybook en Menu buttons in Figma.
• Er wordt gebruik gemaakt van een chevron down om het panel te openen.
• Menu items hebben hebben bij default state een donkergrijze kleur.
• Active state gaat uit van de pagina waarop de gebruiker zich bevindt.
• Documentatie beschikbaar.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Primary
Hoofdnavigatie (of primaire navigatie): wordt gebruikt wanneer je een website hebt met meerdere applicaties, thema's of onderwerpen hebt zodat gebruikers makkelijk kunnen navigeren tussen pagina's.

Secondary
Sub-navigatie: heeft een pagina/onderwerp subcategorieën en is het essentieel om hierbinnen te kunnen navigeren.

With extension
Bevat een zoekbalk die onderdeel uitmaakt van de navigatie.

Website

Mogelijkheid tot dropdown menu

---

Notities

• Onder de naam Navbar.
• Bestaat uit een hoofd- en subnavigatie.
• Kan bestaan uit menu item 'Meer' waarna je een dropdown menu kunt openen.
• Er wordt gebruik gemaakt van een chevron down om het dropdown menu te openen.
• Is een unordered list waarvan menu items bestaan uit list items.
• Op small containers verdwijnt de Navigation bar achter een menu button.
• Documentatie beschikbaar.

[Rozerinay]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Simpele navigatiebalk
Een simpele navigatiebalk gebruik je wanneer er weinig pagina zijn om naar toe te navigeren. Er is een mogelijkheid om een submenu toe te voegen.

Navigatiebalk met breadcrumbs en menu
Op mobiel is bij de breadcrumbs alleen het laatste niveau en de home-icon zichtbaar. De andere niveaus zijn voor blinde mensen wel zichtbaar. Het hamburgermenu is een collapsable, dus je moet wel de collapse javascript toevoegen (zie de pagina van de collapse).

Navigatiebalk met breadcrumbs en knoppen
Navigatie waarbij de Breadcrumb navigation en knoppen aanwezig zijn, zoals de zoekbutton.

Website
Small container

Collapse details

---

Notities

• Onder de naam Navigation.
• Bestaat naast menu items uit een breadcrumb navigation en knoppen.
• Er is een mogelijkheid om een submenu toe te voegen.
• Op small containers zijn buttons te zien waarin een icoon en tekst staan van het menu item. De icoon en het label worden onder elkaar gepositioneerd.
• Kan bestaan uit een menu item dat kan worden opengeklapt waarna een collapse details verschijnt.
• Wanneer collapse details aanwezig is, is deze op small containers samen met de knoppen achter een hamburgermenu te vinden.
• Documentatie beschikbaar.

[Rozerinay]

OpenGemeenten

• Patternlab

---

Screenshots / Varianten

Patternlab
Wordt gebruikt als hoofdnavigatie.

Menu link
Link die onderdeel is van de Page Header Menu.

Menu link active state

Website

---

Notities

• Onder de naam Page Header Menu.
• Menu links wrappen over de volgende regel.
• Menu links hebben hebben bij default state een blauwe kleur.
• Bij active state hebben menu links een donkergrijze kleur en is een visuele indicator boven het label te zien.
• Op small containers verdwijnt de Navigation bar achter een hamburgermenu.
• Geen mogelijkheid tot een megamenu.

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook
Default

Figma
The header navigation can be constructed out of two bars, a top bar and a menu bar. Use the top bar for tertiary links and for a back link if you’re using a product or label of Gemeente Rotterdam. Use the main menubar for the main menu items.

---

Notities

• Onder de naam Nav bar.
• Gaan uit van 'main menu bar' en 'top bar'.
• Uitwerking in Storybook bestaat alleen uit de menu bar (i.p.v. de top bar).
• Kan bestaan uit een menu item dat kan worden opengeklapt waarna een menu verschijnt.
• Er wordt gebruik gemaakt van een chevron down om het menu te openen.
• Bij active state hebben navigation items een visuele indicator onder het label.
• Op small containers verdwijnt de Navigation bar achter een hamburgermenu.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Documentatie website

Storybook
Default

Active item

Align to right

Horizontal divider

Vertical divider

With icons left

With icons right

Max width small

Max width medium

Max width large

Size small

Size medium

Size large

Submenu
Het menu dat opent nadat een menu item is opengeklapt.

Submenu grid

Figma

Website

---

Notities

• Onder de naam Menu bar.
• Bestaat uit top nav items.
• Mogelijkheid voor icoon voor of achter link, horizontale of verticale divider, verschillende max widths en voor verschillende sizes.
• Kan bestaan uit een achtergrondkleur.
• Uitwerking in de documentatie website, Storybook en Figma verschilt van de website.
• Op de website is er een mogelijkheid om een menu item open te klappen.
• Er wordt gebruik gemaakt van een chevron down om het submenu te openen.
• Op small containers verdwijnt de Navigation bar achter een hamburgermenu.

[Rozerinay]

Navigation bar

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Navigation bar with navigation list
Navigatie die links wordt uitgelijnd.

Center appearance
Navigatie die in het midden wordt uitgelijnd.

Wrap many items
Veel items die op meerdere regels zijn verspreid.

Wrap long text in items
Items die bestaan uit lange teksten en daardoor over meerdere regels zijn verspreid.

Website

---

Notities

• Onder de naam Navigation bar.
• Bestaat uit nav list items.
• Uitwerking in Storybook verschilt van de website.
• Geen mogelijkheid tot een megamenu.
• Geen andere styling voor active state.
• Op small containers verdwijnt op de de Navigation bar achter een hamburgermenu en in Storybook wrapt het over meerdere regels.