SGDS Subnav Component Skill

<sgds-subnav> is a horizontal secondary navigation bar, typically placed below <sgds-mainnav>. It supports a header title, navigation links via <sgds-subnav-item>, and optional action buttons.

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

Need action buttons alongside the nav? → Use the actions slot for <sgds-button> elements

Section header text? → Use the header slot

Mark current section? → Add active to the relevant <sgds-subnav-item>