Some features from this component may require sgds.js

All .gov.sg informational services shall adopt a Global Primary Navigation Panel across all pages

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-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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>
</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-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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>
</nav>

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

Show code snippet
<nav class="sgds-navbar" role="navigation" style="z-index: 31">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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>
</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-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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>
</nav>
<div class="row is-hidden-touch is-marginless hide"  id="searchbar-1" >
    <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="button"
                        class="sgds-button is-primary has-text-white padding--left padding--right"
                    >
                        SEARCH
                    </button>
                </div>
            </div>
        </form>
    </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-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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">
                Navbar-start, lorem ipsum dolor sit
            </a>
        </div>
        <div class="sgds-navbar-end has-item-max-width">
            <a class="sgds-navbar-item is-uppercase is-tab">
                Navbar-end, lorem ipsum dolor sit
            </a>
            <div class="sgds-navbar-item  is-hidden-touch">
                <button
                    class="sgds-button is-white is-large search-toggle"
                    data-target="searchbar-2"
                >
                    <span class="sgds-icon sgds-icon-search"></span>
                </button>
            </div>
        </div>
    </div>
</nav>

To make make a full width navbar, You can wrap .sgds-container.is-fluid around sgds-navbar

Show code snippet
<div class="sgds-container is-fluid">
    
<nav class="sgds-navbar" role="navigation">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.png" alt="" />
        </a>
        <div class="sgds-navbar-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>
</nav>

</div>

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