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">