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-brandThe
.sgds-navbar-brandcontainer is visible across all device sizes and always sits at the left -
.sgds-navbar-menuThe
.sgds-navbar-menuis to the right of.sgds-navbar-brand, and hidden on mobile devices (<1024px wide). Its children can further be positioned with:-
.sgds-navbar-startPositioned at the left on desktop and top on mobile.
-
.sgds-navbar-endPositioned 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
Can't find a component?
Let us know what you need and we’ll be happy to look into it