Some features from this component may require sgds.js

The side nav is a standard component that all '.gov.sg' websites must have for every inner page two or more levels of navigation.


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>

Sticky sidenav that stays on the page while scrolling through main content, such as the one on the left of this page. JS

Show code snippet
<div class="sidenav-container">
    <div class="sidenav" data-topspacing="140" data-bottomspacing="40">
        <aside class="sgds-menu sidebar__inner">
            <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>
    </div>
</div>

Guidelines

Side nav 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