Integration without Atlas

The first thing you need to do to integrate the Global Navigation Menu is to load the library by adding the following to your page header:

        <script src=""></script>

Once the library has been included, all you have to do is call the following javascript method:


With the parameters being:

Parameter value
Id of the container where we want to display the list of service links.
Code of the service that is currently active. You can find the supported services here
Array of Service codes that we want to be visible on the menu. You can find the supported services here
['CAM', 'MH', 'MS', 'CLC', 'DCC']

This is the very minimum requirement to get the menu working on your project. However, most of the time you will want to have a clickable menu item for the user to be able to show/hide the links menu. It is entirely up to you how to implement this, but we have added a complete example as a reference.


Step 1 - Adding the container for the link list

We add a container where we want the list of links to appear:

        <div id="services-menu-container" class="hidden">
            <div id="services-menu"></div>
        <div id="services-menu-fade" class="hidden"></div>

Step 2 - Adding an option on our navigation menu for the user to show/hide the list of links

This is how our menu option looks like:

        <div id="navbar-services">
            <a id="navbar-services-menu" class="navbar-services-menu" href="javascript:void(0);" onclick="toggleMenu()">
                <span class="navbar-services-menu__title">Service</span>
                <div class="navbar-services-menu__detail">
                <span id="navbar-services-menu__current_service" class="navbar-services-menu__current_service"></span>
                <svg class="navbar-services-menu__select-icon cyclops-icon"><use xlink:href='#icon-caret-down'></svg>

Step 3 - Triggering the show/hide of the list of links

On the code above, note the call to toggleMenu() when the user clicks on navbar-services-menu, this will trigger showing and hiding the Global Navigation Menu.

Our implementation of toggleMenu() has some code to add a little animation and handles showing and hiding different elements when the user triggers the click action.

        this.currentService = 'DCC';
        this.servicesList = ['CAM', 'MH', 'MS', 'CLC', 'DCC'];
        this.toggleMenu = function() {
            var servicesMenuContainer, servicesMenuFade, servicesMenuItem;
            servicesMenuContainer = document.getElementById('services-menu-container');
            servicesMenuFade = document.getElementById('services-menu-fade');
            servicesMenuItem = document.getElementById('navbar-services-menu');
            if (!servicesMenuContainer.classList.contains('hidden')) {
                insertServicesMenuAt('services-menu', this.currentService, this.servicesList);
       = '100%';

Step 4 - Style accordingly

We use the following less file to style the menu option:

        #services-menu-container {
            position: relative;

            &.hidden {
                display: none;

            #services-menu {
                position: absolute;
                z-index: 1000;
                width: 100%;
                top: 1px;
                box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);

        #services-menu-fade {

            &.hidden {
                display: none;

        #navbar-services {
            display: flex;
            flex-grow: 1;

            .navbar-services-menu {
                font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
                display: flex;
                flex-direction: column;
                height: 45px;
                text-decoration: none;
                border-radius: 5px;
                padding: 3px 8px 8px 8px;
                margin-top: 3px;

                &.open {
                    background: #EEEEEE;
                    box-shadow: 0 2px 2px #DCDCDC inset;

                    .navbar-services-menu__select-icon {
                        transform: rotate(180deg);

                &__title {
                    font-size: 11px;
                    color: #9B9B9B;

                &__detail {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                &__select-icon {
                    align-self: flex-end;
                    transition: all linear 150ms;
                &__current_service {
                    color: #333;
                    font-size: 13px;
                    font-weight: 600;
                    -webkit-font-smoothing: antialiased;