Main Nav

Some features from this component may require sgds.js

Overview

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.

Types

1) Basic Main Navigation

<nav class="sgds-navbar" role="navigation">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.svg" alt="Design System" />
        </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>
        </div>
        <div class="sgds-navbar-end">
            <a class="sgds-navbar-item is-uppercase is-tab">
                Link 4
            </a>
        </div>
    </div>
</nav>

2) With Dropdown

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

<nav class="sgds-navbar" role="navigation">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.svg" alt="Design System Logo" />
        </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>

3) With Mega Menu

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

<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.svg" alt="Design System Logo" />
        </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>

4) With Search Bars

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


<nav class="sgds-navbar" role="navigation">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.svg" alt="Design System Logo" />
        </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"
                                aria-label="search" />
                        </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 style="display:none;">
                        search
                    </span>
                </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"
                        aria-label="search" />
                    <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>

5) Full-Width Navbar

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

<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.svg" alt="Design System" />
        </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>
        </div>
        <div class="sgds-navbar-end">
            <a class="sgds-navbar-item is-uppercase is-tab">
                Link 4
            </a>
        </div>
    </div>
</nav>

</div>

Important Information

Navbar section behaviour

The sgds-navbar component supports 3 types of direct children containers:

  • .sgds-navbar-brand

    The .sgds-navbar-brand container is visible across all device sizes and always sits at the left

  • .sgds-navbar-menu

    The .sgds-navbar-menu is to the right of .sgds-navbar-brand, and hidden on mobile devices (<1024px wide). Its children can further be positioned with:

    • .sgds-navbar-start

      Positioned at the left on desktop and top on mobile.

    • .sgds-navbar-end

      Positioned at the right on desktop and bottom on mobile.


Burger button on mobile views JS

Since the .sgds-navbar-menu element is hidden on mobile devices, you can add a .sgds-navbar-burger button inside .sgds-navbar-brand to toggle the visibility of the navbar menu.


Guidelines

Main navigation 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