네비게이션 바는 사이트 전체에 걸쳐 어디서나 사용할 수 있도록 바 형태로 구성하여 제공하는 메뉴 모음을 지칭합니다.
Usage
별도의 트리거 없이 사이트에 항상 노출하는 메뉴 구성입니다. 가로 형태 또는 세로 형태의 바로 제공합니다.
•
사이트 최상단에 글로벌 네비게이션 바를 배치하여 사용합니다.
•
글로벌 네비게이션 바 하단에 로컬 네비게이션 바를 배치하여 사용합니다.
•
콜라보레이션 메뉴는 별도의 글로벌 네비게이션을 구성하여 사용합니다.
•
콜라보레이션 메뉴에서는 사이트 좌측으로 세로 형태의 네비게이션 바를 배치하여 사용합니다.
•
1,024px 이하를 기점으로 각 네비게이션 바는 모바일 환경에서 정의하는 형태로 사용합니다.
Variants
Global Navigation Bar
전체 페이지 상단에 위치하는 주 네비게이션입니다.
1.
로고
BI 또는 CI를 사용하며, 메인 페이지로 이동을 제공합니다.
2.
주 메뉴
정보 구조의 1depth 메뉴를 제공합니다. 해당 영역에 마우스 오버 시 메가 메뉴가 열립니다.
3.
보조 메뉴
편의성 메뉴를 아이콘 버튼으로 표시합니다. 메뉴 성격에 따라 링크 이동 또는 드롭다운 메뉴가 열립니다.
콜라보레이션 메뉴 내에서는 별도의 주 네비게이션을 구성하여 사용합니다.
1.
메인
마우스 오버 시 콜라보레이션을 제외한 나머지 주 메뉴를 제공하는 드롭다운 메뉴가 열립니다.
Local Navigation Bar
로컬 네비게이션에서는 상위 메뉴와 종속적으로 연결된 동일 계층의 메뉴를 제공합니다.
브레드크럼 하단에 배치하지만, 일부 화면에서는 헤더 영역 하단에 배치하여 사용할 수 있습니다.
1.
현재 계층의 메뉴를 제공합니다. 드롭다운 메뉴 등을 통해 하위 메뉴를 제공하지 않습니다.
콜라보레이션 메뉴 내에서 로컬 네비게이션은 반드시 글로벌 네비게이션 하단에 위치합니다.
Bottom Navigation
푸터 위에 위치하며, 정책이나 문의 및 바로가기 등을 제공하는 네비게이션입니다.
푸터가 없는 콜라보레이션 메뉴에서는 사용하지 않습니다.
1.
사이트 정책, 약관, 문의하기 등의 메뉴를 제공합니다.
2.
소셜 미디어 채널로 이동하는 링크를 제공합니다.
Side Navigation Bar
콜라보레이션 메뉴 내에서 사용하며 화면 좌측에 위치합니다. 마이켐온 메뉴 전용 네비게이션으로 사용합니다.
1.
기본 상태는 바 형태로 아이콘버튼으로 메뉴를 표시합니다.
2.
마우스 오버 시 확장 형태로 열리며 아이콘과 텍스트 레이블, 배너 등을 표시합니다.
Guidelines
•
각 메뉴 아이템은 단일 작업만 수행해야 합니다. 메뉴 레이블에 해당하는 페이지로 이동하거나 드롭다운, 팝오버 등 오버레이 요소의 호출 외의 기능은 하지 않습니다.
•
주 메뉴 항목은 반드시 텍스트 레이블을 사용해야 하며 배지와 같은 추가 구성요소를 사용하지 않습니다.
•
보조 메뉴 항목은 인지하기 쉬운 아이콘을 배치하거나 필요에 따라 배지 등의 요소를 추가할 수 있습니다.
