Page Structure
Global Header with Navigation panel
All judiciary websites shall adopt a Global Primary Navigation Panel across all pages. The following header navigation has 2 types of dropdowns that can be used based on the context and need.
For Desktop
Multi-column drop down menu
Single column drop down menu
For Tablet / Mobile (Hamburger Menu)
For screen widths less than 1024px, hamburger menu appears as shown below;
<header class="navbar-container">
<nav class="navbar navbar-expand-lg ">
<div class="container">
<!-- Menu Logo -->
<a class="navbar-brand" href="#"><img src="images/sg-courts-logo.svg" alt="Logo"></a>
<div class="navbar-toggler" onclick="menuMove(this)">
<div class="menu-icon">
<div class="menu-bar1"></div>
<div class="menu-bar2"></div>
<div class="menu-bar3"></div>
</div>
</div>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item mx-md-2"><a class="nav-link" href="#" title="Go to Item 2">About</a></li>
<li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Templates <span class="caret"></span></a>
<!--Add .menu-inline class if inline menu is required-->
<div class="dropdown-menu menu-inline" aria-labelledby="navbarDropdown">
<div class="container"> <a class="dropdown-item" href="page-empty.html" title="">Header + Body (Empty) + Footer</a> <a class="dropdown-item" href="page-with-content.html" title="">Header + Body with Content + Footer</a> <a class="dropdown-item" href="page-with-form.html" title="">Header + Body with Form + Footer</a><a class="dropdown-item" href="my-info.html" title="">My Info</a><a class="dropdown-item" href="faq.html" title="">FAQ</a> </div>
</div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Menu <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#" title="Go to Item 1A">Dropdown Menu 1</a> <a class="dropdown-item" href="#" title="Go to Item 1B">Dropdown Menu 2</a> </div>
</li>
<li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Components <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container megamenu">
<div class="row">
<div class="col-lg-4"> <a class="dropdown-item" href="#accordion-wrapper">Accordion</a> <a class="dropdown-item" href="#badge-wrapper">Badge</a> <a class="dropdown-item" href="#breadcrumb-wrapper">Breadcrumb</a> <a class="dropdown-item" href="#buttons-wrapper">Button</a> <a class="dropdown-item" href="#cards-wrapper">Card</a> <a class="dropdown-item" href="#callouts-wrapper">Callout</a> <a class="dropdown-item" href="#carousel-wrapper">Carousel</a> <a class="dropdown-item" href="#checkbox-wrapper">Checkbox</a> <a class="dropdown-item" href="#dropdown-wrapper">Dropdown</a> <a class="dropdown-item" href="#hero-wrapper">Hero</a></div>
<div class="col-lg-4"> <a class="dropdown-item" href="#icons-wrapper">Icons</a><a class="dropdown-item" href="#loader-wrapper">Loader</a> <a class="dropdown-item" href="#modals-wrapper">Modal</a> <a class="dropdown-item" href="#notfication-wrapper">Notification</a> <a class="dropdown-item" href="#pagination-wrapper">Pagination</a> <a class="dropdown-item" href="#popover-wrapper">Popover</a> <a class="dropdown-item" href="#radiobutton-wrapper">Radio Button</a> <a class="dropdown-item" href="#range-slider-wrapper">Range Slider</a><a class="dropdown-item" href="#scrolltotop-wrapper">Scroll to top</a> <a class="dropdown-item" href="#tab-wrapper">Tab</a></div>
<div class="col-lg-4"> <a class="dropdown-item" href="#simple-table-wrapper">Table</a> <a class="dropdown-item" href="#tag-wrapper">Tag</a> <a class="dropdown-item" href="#textarea-wrapper">Text Area</a> <a class="dropdown-item" href="#textinput-wrapper">Text Input</a> <a class="dropdown-item" href="#timeline-wrapper">Timeline</a> <a class="dropdown-item" href="#tooltip-wrapper">Tooltip</a><a class="dropdown-item" href="#typography-wrapper">Typography</a> <a class="dropdown-item" href="#wizard-wrapper">Wizard</a> </div>
</div>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item ml-2 ml-md-0 my-2 my-md-0">
<button class="btn btn-primary btn-lg" type="button" aria-label="Login" title="Login Now" onclick="javascript:location.href=''"><span class="fal fa-unlock-alt"></span> Login</button>
</li>
</ul>
</div>
</div>
</nav>
</header>Side Nav (JS required)
All judiciary websites shall adopt a Global Primary Navigation Panel across all pages.
For services with 2 or more levels of navigation, pages should contain secondary navigation, at the side to aid users in locating site content. (Optional)
<aside class="jds-menu">
<div class="row">
<div class="col-md-4 col-lg-3">
<div class="side-nav">
<ul>
<li><a href="#"><span>Main menu(no icon)</span></a></li>
<li class="dropdown-cust"><a href="javascript:void(0)" class="dropdown-toggle-cust"><span>Main menu + sub nav (no icon)</span></a>
<div class="dropdown-menu-cust"> <a class="dropdown-item active" href="#">Sub menu one</a> <a class="dropdown-item" href="#">Sub menu two</a> <a class="dropdown-item" href="#">Sub menu three</a> </div>
</li>
<li><a href="#"><i class="fal fa-briefcase"></i><span>Main menu(has icon)</span></a></li>
<li class="dropdown-cust"><a href="javascript:void(0)" class="dropdown-toggle-cust"><i class="fal fa-briefcase"></i><span>Main menu + sub nav (has icon)</span></a>
<div class="dropdown-menu-cust"> <a class="dropdown-item active" href="#">Sub menu one</a> <a class="dropdown-item" href="#">Sub menu two</a> <a class="dropdown-item" href="#">Sub menu three</a> </div>
</li>
</ul>
</div>
</div>
</div>
</aside>Guidelines
Side navigation should:
Be positioned on the left of every inner page in a digital service
Footer
We advise that you avoid using more than 6 columns of footer links.
<footer class="jds-footer">
<div class="container-fluid">
<div class="top-section sitemap">
<h2 class="jds-footer-sitemap-header text-left">
<img src="images/sg-courts-logo-white.svg" alt="">
</h2>
<div class="footer-links">
<div class="row">
<div class="col-md-3">
<h4>Main link one</h4>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
</ul>
</div>
<div class="col-md-6">
<h4>Main link two</h4>
<ul class="columns">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
<li>
<a href="#">Link 6</a>
</li>
<li>
<a href="#">Link 7</a>
</li>
<li>
<a href="#">Link 8</a>
</li>
<li>
<a href="#">Link 9</a>
</li>
<li>
<a href="#">Link 10</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>Main link three</h4>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divider">
<div class="bottom-section">
<div class="row">
<div class="col-lg-9 ">
<div class="footer-links">
<a href="https://tech.gov.sg/report_vulnerability" target="_blank">Report Vulnerability <i class="fal fa-external-link ml-1"></i>
</a>
<a href="#">Privacy Statement</a>
<a href="#">Terms of Use</a>
<a href="https://www.reach.gov.sg/" target="_blank">Reach.gov.sg <i class="fal fa-external-link ml-1"></i>
</a>
</div>
<div class="powered-by mt-3">Powered by <img src="images/cl-logo.png" alt="">
</div>
</div>
<div class="col-lg-3 mobile-mt-3 copyright text-right">
<div>© 2020 Government of Singapore</div>
<div> Last updated: 15 Jan 2021</div>
</div>
</div>
</div>
</div>
</footer>Note: Users have to ensure all the above sections must be inside a wrapper div that is
<div class="wrapper sticky" id="page">
Last updated