Some features from this component may require sgds.js

All .gov.sg informational services shall adopt a Global Primary Navigation Panel across all pages

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


Basic side navigation to support level 2 navigation.
Show code snippet
<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>

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

Show code snippet
<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>
        <div class="second-level-nav-div">
            <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>
        </div>
        <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>
        <div class="second-level-nav-div">
            <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>
        </div>
    </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