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.

For services with 2 or more levels of navigation, pages should contain secondary navigation, at the side to aid users in locating site content.


Types

1) Basic side navigation to support level 2 navigation.

<aside class="sgds-menu">
    <ul class="sgds-menu-list">
        <li><a class="is-active" href="#!">Level 2A</a></li>
        <li><a href="#!">Level 2B</a></li>
        <li><a href="#!">Level 2C</a></li>
    </ul>
</aside>

2) Level 2 navigation dropdowns that show/hide level 3 navigation links JS

<aside class="sgds-menu">
    <ul class="sgds-menu-list">
        <li class="second-level-nav">
            <a class="second-level-nav-header is-active">
                Level 2A
                <i class="sgds-icon sgds-icon-chevron-up" aria-hidden="true"></i>
            </a>
        </li>
        <li class="second-level-nav-div">
            <ul>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
            </ul>
        </li>
        <li><a href="#!">Level 2B</a></li>
        <li class="second-level-nav">
            <a class="second-level-nav-header">
                Level 2C
                <i class="sgds-icon sgds-icon-chevron-up" aria-hidden="true"></i>
            </a>
        </li>
        <li class="second-level-nav-div">
            <ul>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
                <li><a class="second-level-nav-item" href="#!">Level 3 item</a></li>
            </ul>
        </li>
    </ul>
</aside>

Guidelines

Side navigation should:

  • Be positioned on the left of every inner page in a digital service
  • Be hidden when used on mobile devices

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team