Some features from this component may require sgds.js

The main nav is a standard navigation component that must be present in all pages of '.gov.sg' websites.

Previous version of sgds used the .navbar class which is now deprecated and may not longer receive updates or fixes. While .navbar may work, it is recommended that you use .sgds-navbar instead, which would also not clash with other css frameworks like Bootstrap.

Basic main nav without search. Applicable for small websites with a limited number of pages.

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

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

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

Main nav with a mega menu for secondary selection. Suitable for large-sized websites.

Show code snippet
<nav class="sgds-navbar" role="navigation">
    <div class="sgds-container">
        <div class="sgds-navbar-brand">
            <a class="sgds-navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="" />
            </a>
            <div class="sgds-navbar-burger burger" data-target="mainnav-3">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-3" class="sgds-navbar-menu">
            <div class="sgds-navbar-start">
                <div class="sgds-navbar-item has-dropdown is-hoverable is-mega">
                    <a class="sgds-navbar-link is-uppercase is-active">
                        Who we are
                    </a>
                    <div class="sgds-navbar-dropdown">
                        <div class="sgds-container is-fluid">
                            <div class="row">
                                <div class="col is-3">
                                    <p class="sgds-navbar-item is-uppercase">
                                        <b>Sub Menu 1a</b>
                                    </p>
                                    <a class="sgds-navbar-item">
                                        Sub Link 1
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 2
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 3
                                    </a>
                                </div>
                                <div class="col is-3">
                                    <p class="sgds-navbar-item is-uppercase">
                                        <b>Sub Menu 1b</b>
                                    </p>
                                    <a class="sgds-navbar-item">
                                        Sub Link 1
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 2
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 3
                                    </a>
                                </div>
                                <div class="col is-6">
                                    <div class="sgds-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="sgds-navbar-item has-dropdown is-hoverable is-mega">
                    <a class="sgds-navbar-link is-uppercase">
                        Mega Menu
                    </a>
                    <div class="sgds-navbar-dropdown">
                        <div class="sgds-container is-fluid">
                            <div class="row is-multiline">
                                <div class="col is-3">
                                    <p class="sgds-navbar-item is-uppercase">
                                        <b>Sub Menu 2a</b>
                                    </p>
                                    <a class="sgds-navbar-item">
                                        Sub Link 1
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 2
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 3
                                    </a>
                                </div>
                                <div class="col is-3">
                                    <p class="sgds-navbar-item is-uppercase">
                                        <b>Sub Menu 2b</b>
                                    </p>
                                    <a class="sgds-navbar-item">
                                        Sub Link 1
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 2
                                    </a>
                                    <a class="sgds-navbar-item">
                                        Sub Link 3
                                    </a>
                                </div>
                                <div class="col">
                                    <div class="sgds-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>
    </div>
</nav>

To add search bars to your main mav, please import sgds.js.


Show code snippet
<nav class="sgds-navbar" role="navigation">
    <div class="sgds-container">
        <div class="sgds-navbar-brand">
            <a class="sgds-navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="" />
            </a>
            <div class="sgds-navbar-burger burger" data-target="mainnav-4">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-4" class="sgds-navbar-menu">
            <div class="sgds-navbar-start">
                <div class="sgds-navbar-item is-hidden-desktop">
                    <form>
                        <div class="field has-addons">
                            <div class="control is-expanded">
                                <input
                                    class="input is-fullwidth"
                                    id="nav-4-search-mobile"
                                    type="text"
                                    placeholder="What are you looking for?"
                                    name="nav-4-search-mobile"
                                />
                            </div>
                        </div>
                    </form>
                    <hr class="is-marginless margin--top--sm" />
                </div>
                <a class="sgds-navbar-item is-uppercase is-tab">
                    Who we are
                </a>
            </div>
        </div>
        <div class="sgds-navbar-end is-hidden-touch">
            <div class="sgds-navbar-item">
                <button
                    class="sgds-button is-white is-large search-toggle"
                    data-target="searchbar-1"
                >
                    <span class="sgds-icon sgds-icon-search"></span>
                </button>
            </div>
        </div>
    </div>
</nav>

<div
    class="sgds-container is-fluid is-hidden-touch is-marginless hide"
    id="searchbar-1"
>
    <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="nav-4-search"
                            type="text"
                            placeholder="What are you looking for?"
                            name="nav-4-search"
                            autocomplete="off"
                        />
                        <span class="icon is-left">
                            <i
                                class="search-bar-icon sgds-icon sgds-icon-search is-size-7"
                            ></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>

To accommodate links containing longer text, add .has-item-max-width to .sgds-navbar-start or .sgds-navbar-end to fix the width of their children .sgds-navbar-item elements.

Show code snippet
<nav class="sgds-navbar" role="navigation">
    <div class="sgds-container">
        <div class="sgds-navbar-brand">
            <a class="sgds-navbar-item">
                <img src="/assets/img/logo_sgds.png" alt="" />
            </a>
            <div class="sgds-navbar-burger burger" data-target="mainnav-5">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div id="mainnav-5" class="sgds-navbar-menu">
            <div class="sgds-navbar-start has-item-max-width">
                <a class="sgds-navbar-item is-uppercase is-tab">
                    Lorem ipsum dolor sit
                </a>
            </div>
        </div>
        <div class="sgds-navbar-end">
            <div class="sgds-navbar-item has-item-max-width">
                <a class="sgds-navbar-item is-uppercase is-tab">
                    Lorem ipsum dolor sit
                </a>
            </div>
        </div>
    </div>
</nav>

Guidelines

Main navs should:

  • Be positioned below the masthead of every page
  • Contain the service's name and logo
  • Have the logo hyperlinked to the service's homepage
  • Have the search function accessible on the right side

Feedback

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

Chat with the team