Side Navigation

[jeffreylauwers]

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

Deel hieronder een link naar Figma, Storybook 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

Side Navigation

Doel

Verticale navigatie die de mogelijkheid biedt om tussen pagina's te navigeren.

Gerelateerde componenten

Navigation Bar

Onderzoek

Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan - Nielsen Norman Group
Artikel waarin het Side Navigation component wordt toegelicht aan de hand van voordelen en richtlijnen. Deze informatie komt ook terug in een bijbehorende video.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook

Figma - Huidig
States

Figma - WIP
Default

Groeperen

States (default)

States (current)

---

Notities

• Per item optie voor icoon, couter badge
• In Figma - Huidig ook de mogelijkheid voor een chervron down om aan te geven dat er sub items zijn.
• Items hebben hebben bij default state een donkergrijze kleur.
• Documentatie beschikbaar.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website
Zijnavigatie
Een navigatiebalk links van de content. Subnavigatie is alleen bedoeld voor in-page navigatie.

---

Notities

• Als 'Variant' binnen het Navigation component onder de naam 'Zijnavigatie'.
• Vanwege beschrijving lijkt deze variant enkel bedoel voor 'anchor' navigatie.
• Optie voor sub-items
• Geen 'current' weergave waar ook duidt op 'anchor' navigatie.

[jeffreylauwers]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Figma

Default

With icons

States

---

Notities

• Storybook op basis van Den Haag sidenavigation.
• Figma component wijkt af van Storybook. Zonder icoon bevat border inline-start. Met icoon dan geen border.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Children

Siblings

Children and siblings

Figma

Default

Groeperen

States (default)

States (current)

---

Notities

• Documentatie beschikbaar.
• Figma component op basis van Den Haag.

[jeffreylauwers]

DSO Toolkit

Niet als component. Wel op website zelf. Bijvoorbeeld:

• https://aandeslagmetdeomgevingswet.nl/ontwikkelaarsportaal/dso/dso/digitaal-stelsel/
• https://aandeslagmetdeomgevingswet.nl/ontwikkelaarsportaal/presentaties-documenten/leveranciersdag-26-maart-2024/

---

Screenshots / Varianten

Website

Default

Hover

Focus

Sub items

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Side Navigation op het Community bord