Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Navbar Primary: No Menu No Search 

<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <div class="container">
        <a class="navbar-brand" href="/">
            <div class="navbar-brand-container">
                <img src="/v2/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="/v2/img/beeldmerkwit.svg" class="logo" alt="Logo Nijmegen">
            </div>
        </a>
        <div class="collapse navbar-collapse" id="navbar-collapse">
        </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.