SGDS Dropdown Component Skill

<sgds-dropdown> is a toggleable overlay menu. It requires a toggler slot element (typically <sgds-button>) and <sgds-dropdown-item> children for list items. For an icon-only three-dot menu, use <sgds-overflow-menu> instead.

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

Navigation items with <a> tags? → Put <a> inside <sgds-dropdown-item>

No anchor/navigation (action items)? → Put text directly inside <sgds-dropdown-item>

Menu opens upward? → drop="up"

Right-align menu with toggler? → Add menuAlignRight