Side Nav

Side nav is a standard component that all '.gov.sg' websites must adopt for every inner page that has second or more levels of navigation items

Basic side nav to support level 2 navigation, please ensure you have included jquery.sticky-sidebar.js for it to work.

Show code snippet
<div class="sidenav">
    <aside class="sgds-menu sidebar__inner">
        <ul class="sgds-menu-list">
            <li>
                <ul>
                    <li>
                        <a href="" class="is-active padding--sm">
                            <small>Level 2a</small>
                        </a>
                    </li>
                    <li>
                        <a href="" class="padding--sm">
                            <small>Level 2b</small>
                        </a>
                    </li>
                    <li>
                        <a href="" class="padding--sm">
                            <small>Level 2c</small>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </aside>
</div>

Advanced side nav to support level 3 navigation, please ensure you have included jquery.sticky-sidebar.js for it to work.

Show code snippet
<div class="sidenav">
    <aside class="sgds-menu sidebar__inner">
        <ul class="sgds-menu-list">
            <li>
                <a href="" class="is-uppercase has-text-weight-semibold padding--sm">
                    Level 2a
                </a>
                <ul>
                    <li>
                        <a href="" class="is-active padding--sm">
                            <small>Level 3a</small>
                        </a>
                    </li>
                    <li>
                        <a href="" class="padding--sm">
                            <small>Level 3b</small>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="" class="is-uppercase has-text-weight-semibold padding--sm">
                    Level 2b
                </a>
                <ul>
                    <li>
                        <a href="" class="is-active padding--sm">
                            <small>Level 3a</small>
                        </a>
                    </li>
                    <li>
                        <a href="" class="padding--sm">
                            <small>Level 3b</small>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </aside>
</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.

Tell us more