드롭다운 메뉴는 링크나 액션 아이템의 목록을 표시하는 오버레이 요소 입니다.
Usage
링크나 액션을 사용자에게 선택할 수 있도록 제공할 때 드롭다운 메뉴를 사용합니다.
정의된 값 중에 하나 또는 두 개 이상을 선택하여 입력하게 하는 경우에는 셀렉트를 사용합니다
•
선택할 수 있는 항목의 개수가 5~15개 사이인 경우에 사용합니다.
•
선택한 항목의 화면으로 이동하거나 전환하는 경우에 사용합니다.
Anatomy
네비게이션에 사용할 경우에는 아이콘 버튼을 트리거로 사용합니다.
1.
아이콘 버튼
클릭 또는 마우스 오버 시에 드롭다운 메뉴가 열립니다.
클릭 컨트롤을 하는 경우에는 토글 방식으로 동작합니다.
2.
드롭다운 메뉴
화면 이동 속성의 링크를 가진 메뉴 아이템을 표시합니다.
아이콘과 텍스트 레이블을 함께 사용할 수 있습니다.
3.
인터랙션
마우스 오버 스타일을 사용합니다.
현재 페이지에서 선택한 항목의 화면으로 이동 또는 전환하는 경우에는 셀렉트 폼 형태를 트리거로 사용합니다.
1.
현재 화면에 해당하는 항목을 표시합니다.
2.
드롭다운 메뉴를 열거나 닫을 수 있는 아이콘 버튼을 표시합니다.
3.
항목이 많을 경우 드롭다운 메뉴 내에서 스크롤을 표시합니다.
4.
마우스 오버 및 현재 선택된 항목에 대한 스타일을 지정하여 사용합니다.
Variants
Flyout menu
하위 계층까지 탐색 가능한 형태입니다.
1.
트리거를 통해 드롭다운 메뉴가 열립니다.
2.
마우스 오버를 통해 하위 계층의 메뉴를 표시합니다.
Mega menu
사이트 전체 메뉴를 드롭다운을 통해 표시합니다.
1.
네비게이션 바를 트리거로 열립니다. 전체 메뉴 및 배너 등 다양한 요소를 포함합니다.
2.
기본 화면은 어두운 배경색으로 표시하고 기본 화면을 클릭하면 메가 메뉴가 닫힙니다.
Guidelines
•
항목이 4개 이하인 경우에는 드롭다운 메뉴 사용을 지양하고 버튼 그룹의 사용을 권장합니다.
•
항목이 많은 경우에는 그룹화하여 사용하는 것을 권장합니다.
•
항목이 15개를 넘어가는 경우에는 콤보박스의 검색 및 자동완성 기능을 사용하는 것을 권장합니다.
•
항목 레이블은 간결하고 명확하게 작성하고 영어의 경우에는 첫 글자를 대문자로 표시합니다.
•
명사형 레이블의 사용을 원칙으로 합니다.
•
항목 레이블이 드롭다운 메뉴 영역에 넘치는 경우 줄임 패턴을 적용하여 한 줄 표시를 유지합니다.
Accessibility
•
드롭다운 메뉴가 열린 상태에서는 포커스가 드롭다운 메뉴 내에서만 이동해야 합니다.
•
드롭다운 메뉴가 닫히면 드롭다운 메뉴의 트리거 요소에 포커스가 이동합니다.
