🔽 De aanmeld- en applicatieve menu's configureren

1 Het aanmeldmenu configureren
- 1.1 AccessMenuMethods
- 1.2 Hoofdlinks (setMainLinks)
- 1.3 Profielinformatie (setProfile)
2 Het applicatief menu configureren
- 2.1 Over het applicatief menu
- 2.2 ApplicationMenuLink
- 2.3 Properties
- 2.4 Codevoorbeeld

Het aanmeldmenu configureren

Het aanmeldmenu in de Global Header toont gebruikersinformatie, aanmeld‑/afmeldknoppen en applicatiespecifieke navigatie.
👉 Lees de functionele uitleg in https://vlaamseoverheid.atlassian.net/wiki/spaces/IKPubliek/pages/7484014617

👉 Raadpleeg de technische referentie van de interface AccessMenuMethods op
AccessMenuMethods | Global Header - v2.0.26

`AccessMenuMethods`

De onderstaande interface toont alle methodes die u kunt gebruiken om het aanmeldmenu te configureren. Op deze pagina vindt u meer informatie over de configuratie van hoofdlinks, profielinformatie en het applicatief menu.

interface AccessMenuMethods {
    addApplicationMenuLink: (
        link: Translatable<ApplicationMenuLink>,
    ) => Promise<Translatable<ApplicationMenuLink>[]>;
    addApplicationMenuLinks: (
        links: Translatable<ApplicationMenuLink>[],
    ) => Promise<Translatable<ApplicationMenuLink>[]>;
    getApplicationName: () => Promise<string>;
    getProfile: () => Promise<Partial<ProfileConfig>>;
    setApplicationMenuLinks: (
        links: Translatable<ApplicationMenuLink>[],
    ) => Promise<Translatable<ApplicationMenuLink>[]>;
    setApplicationName: (
        applicationName: Translatable<string>,
    ) => Promise<boolean>;
    setMainLinks: (mainLinks: Translatable<MainLink>[]) => Promise<boolean>;
    setProfile: (profileConfig: Partial<ProfileConfig>) => Promise<boolean>;
    setVisibility: (visibility: boolean) => Promise<boolean>;
}

Hoofdlinks (`setMainLinks`)

Gebruik deze methode om de belangrijkste navigatielinks toe te voegen aan het aanmeldmenu.

setMainLinks([
  { label: "Afvalkalender", href: "https://uwgemeente.be/afval" },
  { label: "Lokale premies", href: "https://uwgemeente.be/premies" }
]);

label: de naam van de link zoals u die toont in het menu
href: de URL waarnaar u de gebruiker doorverwijst
target (optioneel): gebruik "_blank" om de link in een nieuw tabblad te openen.

Profielinformatie (`setProfile`)

Gebruik deze methode om de profielconfiguratie van uw toepassing in te stellen. U bepaalt hiermee welke URL voor aanmelden, afmelden en het wisselen van hoedanigheid wordt gebruikt.

loginUrl: URL die u gebruikt om de gebruiker te laten aanmelden.
logoutUrl: URL die u gebruikt om de gebruiker af te melden.
switchCapacityUrl: URL die wordt aangeroepen wanneer de gebruiker van hoedanigheid of profiel wisselt in het aanmeldmenu (bijv. van “burger” naar “mandataris”).

interface ProfileConfig {
    active: boolean;
    idpData: IDPData;
    loginRedirectUrl?: string;
    loginUrl: string;
    logoutUrl: string;
    switchCapacityUrl: string;
}

Het applicatief menu configureren

Over het applicatief menu

Het applicatief menu in de global header is het deel van het hoofdmenu waar u applicatiespecifieke links plaatst.

Deze links verschijnen in het tweede gedeelte van het hoofdmenu, onder de hoofdnavigatie‑items, en verwijzen naar eigen toepassingen of functionaliteiten, bijv. “Mijn Dossier”, “Beveiligde Aanvragen”, …

Een ApplicationMenuLink beschrijft één item in het applicatief menu van de global header. U bepaalt hiermee:

Waar de link naartoe gaat (href), bijv. naar een eigen toepassing of een specifieke functionaliteit
Welke tekst u aan de gebruiker toont (label), zodat duidelijk is wat er achter de link zit, bijv. “Mijn Dossier”
Of u een icoon toont dat aangeeft dat inloggen vereist is (icon), bijv. een slotje voor beveiligde onderdelen
Of de link in hetzelfde of in een nieuw tabblad opent (target)

`ApplicationMenuLink`

Properties

Property	Verplicht	Beschrijving	Type + voorbeeld

Property	Verplicht	Beschrijving	Type + voorbeeld
`href`	ja	De URL waarnaar de applicatieve link navigeert wanneer de gebruiker erop klikt. Kan een absolute URL of een relatief pad binnen uw applicatie zijn.	`string` `"https://mijn.vlaanderen.be/burgerzaken"`
`icon`	nee	Icoon dat naast de link wordt getoond. Gebruik `'e-desk'` wanneer de pagina zonder aanmelding beschikbaar is, `'e-desk-lock'` wanneer aanmelding vereist is, of laat weg voor geen icoon.	`'e-desk' \\| 'e-desk-lock' \\| undefined` `"e-desk-lock"`
`label`	ja	De tekst die voor de link wordt getoond in het applicatief menu. Kies een korte, duidelijke benaming die de functionaliteit beschrijft.	`string` `"Mijn Dossier"`
`target`	nee	Bepaalt waar de gelinkte resource wordt geopend, analoog aan het HTML‑attribuut `target`. Laat weg voor hetzelfde tabblad; gebruik `"_blank"` voor een nieuw tabblad/venster.	`string` `"_blank"`

Codevoorbeeld

[
  {
    "href": "https://mijn.vlaanderen.be/burgerzaken",
    "icon": "e-desk",
    "label": "Mijn Dossier",
    "target": "_blank"
  },
  {
    "href": "/aanvragen",
    "icon": "e-desk-lock",
    "label": "Beveiligde Aanvragen"
  },
  {
    "href": "/help",
    "label": "Hulp & Support"
  }
]

👉 Bekijk de volledige technische referentie van ApplicationMenuLink op
ApplicationMenuLink | Global Header - v2.0.26

Documentatie bouwstenen digitale loketten