드롭다운 메뉴Dropdown Menu

버튼 아래로 떨어져(drop down) 펼쳐진다고 붙은 이름입니다. 화면에 버튼을 다 늘어놓을 수 없을 때, 자주 안 쓰는 동작을 하나의 버튼 뒤로 접어 둡니다. 게시글 카드의 점 세 개(⋯) 버튼이 대표입니다.

언제 쓰나요

한 대상에 대한 동작이 셋 이상일 때 씁니다. 글 하나에 편집·복제·공유·삭제가 있다면 버튼 넷을 나열하는 대신 메뉴 하나로 접습니다. 동작이 하나나 둘이면 그냥 버튼으로 둡니다. 접으면 오히려 클릭이 한 번 늘어납니다.

메뉴 안 순서에도 관습이 있습니다. 자주 쓰는 것이 위, 삭제처럼 되돌릴 수 없는 것은 맨 아래에 구분선을 두고 빨간색으로. 그래야 손이 미끄러져도 사고가 덜 납니다.

AI에게 시키기

게시글 카드 우상단에 점 세 개(⋯) 버튼과 드롭다운 메뉴를 만들어줘.
- 항목: 편집 / 복제 / 링크 복사 / (구분선) / 삭제(빨간색)
- 클릭으로 열고, 바깥 클릭·ESC 로 닫힘. 방향키로 항목 이동, Enter 로 실행
- 화면 아래에 공간이 없으면 위로 펼쳐지게
- 삭제는 바로 실행하지 말고 확인 모달로 연결

"버튼 누르면 메뉴 나오게"만 하면 키보드로 못 열고 바깥을 눌러도 안 닫히는 것이 나옵니다. 닫는 조건과 키보드 동작을 적어야 합니다.

혼동 주의

• 셀렉트(Select): 폼에서 값 하나를 고르는 입력입니다. 고른 값이 버튼에 남습니다. 드롭다운 메뉴는 동작을 실행하고 닫힙니다.
• 커맨드 팔레트: 검색으로 앱 전체 기능에 닿는 것입니다. 드롭다운 메뉴는 한 대상의 동작 몇 개입니다.
• 컨텍스트 메뉴(Context Menu): 마우스 오른쪽 클릭으로 그 자리에 뜨는 메뉴입니다. 내용은 비슷하지만 여는 방법이 다릅니다.
• 케밥·미트볼 메뉴: 점이 세로(⋮)면 케밥, 가로(⋯)면 미트볼이라고 부릅니다. 둘 다 드롭다운 메뉴를 여는 버튼의 별명입니다.