[용어 정의] GNB, LNB, SNB, FNB 네비게이션 클래스명 이름 종류와 차이

https://www.tosspayments.com/about/service

 

토스페이먼츠 사례로 캡쳐해서 설명을 해보았습니다!

 

토스페이먼츠 전자결제

 

GNB ( Global Navigation Bar )

사이트 전체에 동일하게 적용되는 최상위 전체 공통네비게이션을 말한다.
메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바로 불리기도한다. 

최상위 메뉴로 앱에서는 보통 하단 / 웹에서는 상단에 위치한다. 

왼쪽-PC / 오른쪽 - 모바일

 

---

LNB ( Local Navigation Bar )

https://www.tosspayments.com/faq?tab=%EC%A0%95%EC%82%B0&page=1 

토스페이먼츠 전자결제

GNB 메뉴의 서브 메뉴형식으로 나오는 형태의 네비게이션을 말한다.

서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 지역으로 가는 네비게이션 바이다. 

왼쪽-PC / 오른쪽 - 모바일

 

---

SNB ( Side Navigation Bar )

일반적으로 왼쪽에 많이 위치해있으며 메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바를 말한다. 

 

https://docs.tosspayments.com/

토스페이먼츠 결제 연동 문서

 

왼쪽-PC / 오른쪽 - 모바일

모바일화면에서는 GNB의 하위메뉴 구성을 쓰이기도한다.

---

FNB ( Foot Navigation Bar )

하단메뉴, 하단로고, 주소, 카피라이팅 영역이다. 

웹에서 주로 사용된다. 

왼쪽-PC / 오른쪽 - 모바일