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

Navbar: Default 

<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <ul class="navbar-skiplinks">
        <li>
            <a href="#suggest-search-query">Skip to search</a>
        </li>
        <li>
            <a href="#section-1 ">Skip to content</a>
        </li>
    </ul>
    <div class="container">
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false">
            <span class="sr-only">Menu</span>
            <span class="navbar-toggler-icon" aria-hidden="true"></span>
        </button>
        <a class="navbar-brand" href="/">
            <span class="sr-only">Hoofdpagina</span>
            <div class="navbar-brand-container">
                <img src="/v6.0.0/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="/v6.0.0/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt="">
            </div>
        </a>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="navbar-nav mr-auto nijmegen-smooth-scroll">
                <li class="nav-item">
                    <a href="/v6.0.0/components/preview/navbar--default.html#section-1" class="nav-link">One</a>
                </li>
                <li class="nav-item">
                    <a href="/v6.0.0/components/preview/navbar--no-search.html#section-2" class="nav-link">Two</a>
                </li>
                <li class="nav-item">
                    <a href="#section-3" class="nav-link">Three</a>
                </li>
                <li class="nav-item">
                    <a href="#section-4" class="nav-link">Four</a>
                </li>
                <li class="nav-item">
                    <a href="https://nijmegen.nl" class="nav-link">External</a>
                </li>
            </ul>
        </div>
        <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>
            </button>
            <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>
                <button class="autocomplete__clear-button autocomplete__button--hide" aria-label="Invoer wissen" title="Invoer wissen">
                    <span class="mdi mdi-close" aria-hidden="true"></span>
                </button>
                <ul id="autocomplete-results" class="autocomplete__result-list" aria-label="Zoekresultaten">

                </ul>
                <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" aria-atomic="true" class="sr-only"></div>
            </form>

            <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>
                </li>
            </script>
            <script id="autocomplete-section-header-template" type="text/template">
                <li class="autocomplete__section-header" aria-hidden="true">
            
                </li>
            </script>
            <button class="navbar__search-close-button" id="navbar-close-search" aria-label="Sluit zoekveld">
                sluiten
            </button>
        </div>
    </div>
</nav>

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

Read more about skiplinks here

Using the navbar

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

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

Please note: The track=false query parameter in the suggestUrl should be removed for production

<script>
    // Please note that the track=false should be removed on production!
    var suggestUrl = 'https://public.pandosearch.com/nijmegen.nl/suggest?size=5&track=false&q=';

    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);
            }
            callback(result);
        });
    }
</script>

Smooth scroll

When the container of the menu has the class nijmegen-smooth-scroll the page will scroll smoothly to the corresponding section.

For this to work you need to add a hash to the url, smooth scrolling will take place when:

  • The url starts with a hash, or
  • The url is the same as the current page
    For example when you are on https://nijmegen.nl/demo and you have a link to https://nijmegen.nl/demo#section-1
  • An element on the page has the same id as the url hash
    For example a link to #section-1 will scroll smoothly to a element with the id: section-1

Notes

  • Nijmegen has a collaboration with Pandosearch (https://www.pandosearch.com) 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.