Main Nav

Last updates - 19 Dec 2018

• Code snippet updates
• Add .is-active example to highlight active link

Main nav is a standard component that all '.gov.sg' websites must adopt for every page in them

Basic main nav that do not need to have a search function. Applicable for single page websites only.

Show code snippet
<nav class="navbar is-transparent">
    <div class="sgds-container">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="">
            </a>
            <div class="navbar-burger burger" data-target="mainnav-1">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-1" class="navbar-menu">
            <a class="navbar-item is-uppercase is-active">
                Who we are
            </a>
            <a class="navbar-item is-uppercase">
                Link 2
            </a>
            <a class="navbar-item is-uppercase">
                Link 3
            </a>
            <a class="navbar-item is-uppercase">
                Link 4
            </a>
        </div>
    </div>
</nav>

Main nav that has dropdown for secondary selection. Suitable for medium-sized websites.

Show code snippet
<nav class="navbar is-transparent">
    <div class="sgds-container">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="">
            </a>
            <div class="navbar-burger burger" data-target="mainnav-2">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-2" class="navbar-menu">
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link is-uppercase is-active">
                    Who we are  <i class="sgds-icon sgds-icon-chevron-down"></i>
                </a>
                <div class="navbar-dropdown">
                    <a class="navbar-item is-active">
                        Sub Link 1
                    </a>
                    <a class="navbar-item">
                        Sub Link 2
                    </a>
                    <a class="navbar-item">
                        Sub Link 3
                    </a>
                </div>
            </div>
            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link is-uppercase">
                    Link 2  <i class="sgds-icon sgds-icon-chevron-down"></i>
                </a>
                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        External Link 1 <i class="sgds-icon sgds-icon-external"></i>
                    </a>
                    <a class="navbar-item">
                        External Link 2 <i class="sgds-icon sgds-icon-external"></i>
                    </a>
                    <a class="navbar-item">
                        External Link 3 <i class="sgds-icon sgds-icon-external"></i>
                    </a>
                </div>
            </div>
            <div class="navbar-item">
                <a class="navbar-link is-uppercase">
                    External Link 3  <i class="sgds-icon sgds-icon-external"></i>
                </a>
            </div>
        </div>
    </div>
</nav>

Main nav that has mega menu for secondary selection. Suitable for large-sized websites.

Show code snippet
<nav class="navbar is-transparent">
    <div class="sgds-container">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="">
            </a>
            <div class="navbar-burger burger" data-target="mainnav-3">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-3" class="navbar-menu">
            <div class="navbar-item has-dropdown is-hoverable is-mega">
                <a class="navbar-link is-uppercase is-active">
                    Who we are  <i class="sgds-icon sgds-icon-chevron-down"></i>
                </a>
                <div class="navbar-dropdown">
                    <div class="sgds-container is-fluid">
                        <div class="row">
                            <div class="col is-3">
                                <p class="navbar-item is-uppercase"><b>Sub Menu 1a</b></p>
                                <a class="navbar-item">
                                    Sub Link 1
                                </a>
                                <a class="navbar-item">
                                    Sub Link 2
                                </a>
                                <a class="navbar-item">
                                    Sub Link 3
                                </a>
                            </div>
                            <div class="col is-3">
                                <p class="navbar-item is-uppercase"><b>Sub Menu 1b</b></p>
                                <a class="navbar-item">
                                    Sub Link 1
                                </a>
                                <a class="navbar-item">
                                    Sub Link 2
                                </a>
                                <a class="navbar-item">
                                    Sub Link 3
                                </a>
                            </div>
                            <div class="col is-6">
                                <div class="navbar-item is-wrapped">
                                    <p>
                                        <b>Sub Menu 1 Info</b><br>
                                        You can put short paragraph of information here to describe about this section.
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar-item has-dropdown is-hoverable is-mega">
                <a class="navbar-link is-uppercase">
                    Mega Menu  <i class="sgds-icon sgds-icon-chevron-down"></i>
                </a>
                <div class="navbar-dropdown">
                    <div class="sgds-container is-fluid">
                        <div class="row is-multiline">
                            <div class="col is-3">
                                <p class="navbar-item is-uppercase"><b>Sub Menu 2a</b></p>
                                <a class="navbar-item">
                                    Sub Link 1
                                </a>
                                <a class="navbar-item">
                                    Sub Link 2
                                </a>
                                <a class="navbar-item">
                                    Sub Link 3
                                </a>
                            </div>
                            <div class="col is-3">
                                <p class="navbar-item is-uppercase"><b>Sub Menu 2b</b></p>
                                <a class="navbar-item">
                                    Sub Link 1
                                </a>
                                <a class="navbar-item">
                                    Sub Link 2
                                </a>
                                <a class="navbar-item">
                                    Sub Link 3
                                </a>
                            </div>
                            <div class="col">
                                <div class="navbar-item is-wrapped">
                                    <p>
                                        <b>Sub Menu 2 Info</b><br>
                                        You can put short paragraph of information here to describe about this section.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

For main nav that require a search function, please ensure you have included sgds.js for it to work.


Show code snippet
<nav class="navbar is-transparent">
    <div class="sgds-container">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="">
            </a>
            <div class="navbar-burger burger" data-target="mainnav-4">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-4" class="navbar-menu">
            <div class="navbar-item is-hidden-desktop">
                <form action="" method="get">
                    <div class="field has-addons">
                        <div class="control is-expanded">
                            <input class="input is-fullwidth" id="search-box" type="text" placeholder="What are you looking for?" name="query">
                        </div>
                    </div>
                </form>
                <hr class="is-marginless margin--top--sm">
            </div>

            <a class="navbar-item is-uppercase is-active">
                Who we are
            </a>


            <a class="navbar-item is-uppercase">
                Link 2
            </a>


            <a class="navbar-item is-uppercase">
                Link 3
            </a>


            <a class="navbar-item is-uppercase">
                Link 4
            </a>

        </div>
        <div class="navbar-end is-hidden-touch">
            <div class="navbar-item">
                <button class="sgds-button is-white is-large">
                    <span class="sgds-icon sgds-icon-search"></span>
                </button>
            </div>
        </div>
    </div>
</nav>
<div class="sgds-container is-fluid is-hidden-touch is-marginless">
    <div class="row">
        <div class="col">
            <hr class="margin--bottom--sm">
            <form>
                <div class="field has-addons padding--sm">
                    <div class="control has-icons-left is-expanded padding--bottom--sm">
                        <input class="input is-fullwidth is-borderless is-shadowless" id="search-box" type="text" placeholder="Search within this service" name="query" autocomplete="off">
                        <span class="icon is-left">
              <i class="sgds-icon sgds-icon-search is-size-4 search-bar"></i>
            </span>
                    </div>
                    <div class="control">
                        <button type="submit" class="sgds-button is-primary has-text-white padding--left padding--right">SEARCH</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Guidelines

Main nav should:

  • Be positioned below the masthead of every page in a digital service
  • Contain the service name and logo for the digital service
  • Have the logo hyperlinked to the homepage of the digital service
  • Have the search function accessible on the right side of the panel

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more