SGDS Mainnav Component Skill

<sgds-mainnav> is the primary horizontal navigation bar. It collapses into a hamburger menu on small screens. Navigation items use <sgds-mainnav-item> and dropdown menus use <sgds-mainnav-dropdown>.

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

When does the navbar collapse into hamburger? → expand="lg" (default) — collapses below the lg breakpoint

Never collapse (always expanded)? → expand="always"

Always collapsed? → expand="never"

Full-width container? → Add fluid