<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Schakel navigatie">
            <span class="navbar-toggler-icon"></span>
        <a class="navbar-brand" href="/">
            <div class="navbar-brand-container">
                <img src="https://componenten.nijmegen.nl/v2/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="https://componenten.nijmegen.nl/v2/img/beeldmerkwit.svg" class="logo" alt="Logo Nijmegen">
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="navbar-nav mr-auto smooth-scroll">
                <li class="nav-item">
                    <a href="#section-1" class="nav-link">Menu 1</a>
                <li class="nav-item">
                    <a href="#section-2" class="nav-link">Menu 2</a>
                <li class="nav-item">
                    <a href="#section-3" class="nav-link">Menu 3</a>
                <li class="nav-item">
                    <a href="#section-4" class="nav-link">Menu 4</a>
            <form action="https://www.nijmegen.nl" class="form-inline ml-auto">
                <label for="oi-query" class="sr-only">Zoeken</label>
                <input class="form-control" id="oi-query" type="text" placeholder="Zoeken" tabindex="1" autocomplete="off">
                <button class="btn-search" tabindex="2" aria-label="Zoek knop"><i class="mdi mdi-magnify" aria-hidden="true"></i></button>

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.

  • An extra JavaScript include is needed (when the search is part of the component) to have a fully functional component.

By adding underneath script tag after the other required script tags (as documented in How to use) and before the closing body tag, OpenIndex will connect a real-time autocomplete to the search input field.

<script src="//www.openindex.io/js/openindex.69694b9315763c81.js"></script>

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>

In-page anchors

When using the navbar in a one-page application, mobile users will slideout the menu and click on an anchor and navigate to the corresponding section yet leaving the menu open. To handle this use-case, put underneath JavaScript just before the closing “body” tag and the menu will close when navigating to the in-page section.

    var navbarToggler = $('.navbar-toggler');
    // is the mobile nav active?
    if (navbarToggler.is(':visible')) {
        var navbars = $('.navbar-nav.smooth-scroll');
        if (navbars.length) {
            for (var i = 0; i < navbars.length; i++) {
                // act on in-page anchors
                $.each($(navbars[i]).find('.nav-link'), function(index, navLinkElement) {
                    $(navLinkElement).click(function() {
                        // is the menu open?
                        if (!navbarToggler.hasClass('collapsed')) {


  • Nijmegen has a collaboration with OpenIndex (https://www.openindex.io) 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.