Singapore Government Design System: Build your next best digital experience for Singapore

SGDS version 3 is now available 🎉 We are updating this portal. In the meantime, please visit our storybook for the latest updates.

Side Navigation Area is the child of Template Grid and positioned at the left-most of the page. It is a container with stylings meant for a single side navigation component.

sgds-aside-area is a container with stylings meant for a side navigation component. It is designed to accept only 1 direct child.

Example

            
        <sgds-template-grid class="with-sidenav">
    <sgds-aside-area>
        <-- your sidenav component -->
    </sgds-aside-area>
    ...
<sgds-template-grid>