SGDS Sidenav Component Skill

<sgds-sidenav> is a vertical sidebar navigation. <sgds-sidenav-item> creates either a collapsible menu section (when it has children) or a direct link (when an <a> is placed directly inside). <sgds-sidenav-link> is for individual L2/L3 navigation links.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Sticky sidebar that scrolls with content? → Add sticky on <sgds-sidenav>

Collapsible section (menu type)? → Put <span slot="title"> and <sgds-sidenav-link> children inside <sgds-sidenav-item>

Direct link (link type)? → Put <a> directly inside <sgds-sidenav-item> (no title slot and no children)

Mark current page active (opens the section automatically)? → Add active to <sgds-sidenav-item>