<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>
        </button>
        <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>
        </a>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <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>
            </form>
        </div>
    </div>
</nav>

Based on the fixed top version from MDB:
https://mdbootstrap.com/components/navbar/#basic-example

Using

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>
</li>

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.

<script>
    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')) {
                            navbarToggler.trigger('click');
                        }
                    })
                });
            }
        }
    }
</script>

Notes

  • 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.