You are viewing version 3 of the library, the latest version is
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <div class="container">
        <a class="navbar-brand" href="/">
            <span class="sr-only">Hoofdpagina</span>
            <div class="navbar-brand-container">
                <img src="/v3/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="/v3/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt="">
        <div class="collapse navbar-collapse" id="navbar-collapse">
        <div class="navbar__search">
            <button class="navbar__search-button" id="navbar-open-search">
                <span class="sr-only">Open zoekveld</span><span class="mdi mdi-magnify" aria-hidden="true"></span>
            <form class="autocomplete autocomplete__form" method="GET" action="" role="search">
                <input class="autocomplete__input form-control" type="text" placeholder="Zoeken" id="suggest-search-query" name="q" autocomplete="off" aria-controls="autocomplete-results" aria-autocomplete="both" aria-label="Zoekveld" aria-describedby="autocomplete-help-text"
                <button class="autocomplete__search-button" aria-label="Zoekknop">
                    <span class="mdi mdi-magnify" aria-hidden="true"></span>
                <button class="autocomplete__clear-button autocomplete__button--hide" aria-label="Invoer wissen" title="Invoer wissen">
                    <span class="mdi mdi-close" aria-hidden="true"></span>
                <ul id="autocomplete-results" class="autocomplete__result-list" aria-label="Zoekresultaten" role="listbox">

                <span id="autocomplete-help-text" class="sr-only">
                    Als er zoekresultaten gevonden zijn kunt u de pijltjes toetsen omhoog en naar beneden gebruiken om een resultaat
                    te selecteren. Toets enter om te navigeren naar het geselecteerde resultaat. Met de escape toets kunt u de
                    invoer wissen.</span>
                <div id="autocomplete-search-results-announcer" aria-live="assertive" class="sr-only"></div>

            <script id="autocomplete-result-template" type="text/template">
                <li class="autocomplete__result-item" role="option">
                    <a href="" class="autocomplete__result-link" id="" tabindex="-1"></a>
            <script id="autocomplete-section-header-template" type="text/template">
                <li class="autocomplete__section-header" aria-hidden="true">

            <button class="navbar__search-close-button" id="navbar-close-search" aria-label="Sluit zoekveld">

Based on the fixed top version from MDB:


Aside from the markup, some extra actions are needed.

  • Since the navbar is fixed top, it’s advisable to add some padding (with a minimum of 74 pixels) to the body element to not risk having content under the navbar which should be visible by default.

Active menu item

To set an active menu item, underneath HTML markup for a navigation item can be used where a class active is added to the active menu item and as and extra addition regarding accessibility the “span” can be used.

<li class="nav-item active">
    <a href="#" class="nav-link">Menu <span class="sr-only">(huidig)</span></a>

Close mobile menu when clicking outside or when navigate on the same page

Include the script below to enable automatic closing of the menu on a mobile when:

  • A user clicks somewhere outside the menu
  • A user clicks on a link in the menu that scrolls to content on the same page

When using the navbar to scroll to content on the same page make sure to add the class smooth-scroll to the navbar-nav element.

For the autocomplete search a real-time feed is provided by Pandosearch. This uses a combination of search suggestions and direct hits. To use this search functionality, JavaScript code is required before the closing “body” tag.

  • Pandosearch integration
    var suggestUrl = '';

    var autocomplete = new nijmegen.Autocomplete();
    $(document).ready(function () {
        autocomplete.init(getAutocompleteResults, '?q={query}');

    function getAutocompleteResults(query, callback) {
        $.get(suggestUrl + query, function (rawResults) {
            // Get suggestions from raw search results
            var suggestions = rawResults.suggestions
                .map(function (suggestion) {
                    return {
                        title: suggestion.text,
                        url: '?q=' + suggestion.text,
                        class: 'search'

            // Get hits from raw search results
            var hits = Array.isArray(rawResults.hits)
                ? rawResults.hits
                    .map(function (hit) {
                        return {
                            title: hit.title,
                            url: hit.url
                : [];
            var result = [];
            if (hits.length) {
                result = result.concat({ header: 'Zoekresultaten:' }, hits);
            if (suggestions.length) {
                result = result.concat({ header: 'Zoeksuggesties:' }, suggestions);


  • Nijmegen has a collaboration with Pandosearch ( for the search and search results implementation, as can be read in the Using section here. For an example of the search results, have a look at the search results template.