Side Nav

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>

3) Simple side navigation with level 2 navigation.

Add .variant-simple to the top-level <aside>element for a nav featuring less white space.

<aside class="sgds-menu variant-simple">
    <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

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component