# 하이퍼클래스 퍼널 빌더의 네비게이션 메뉴

하이퍼클래스 퍼널 빌더의 네비게이션 메뉴(Navigation Menus)를 사용하면 웹사이트와 퍼널을 위한 구조화되고 반응형인 메뉴를 만들 수 있어요. 링크, 드롭다운, 중첩 항목을 추가하고 레이아웃 동작을 커스터마이징할 수 있습니다. 최근 개선사항으로는 메뉴 항목의 새로운 줄바꿈(Wrap) 옵션과 향상된 서브메뉴 스타일링이 추가되어 데스크톱과 모바일에서 더 부드러운 사용자 경험을 제공해요.

***

## 네비게이션 메뉴란?

네비게이션 메뉴는 방문자가 퍼널이나 웹사이트 내의 페이지 또는 섹션 간을 이동할 수 있게 해주는 인터랙티브 요소예요. 다음 기능들을 지원합니다:

* 직접 페이지 링크
* 외부 URL
* 드롭다운 메뉴
* 중첩된 서브메뉴
* 앵커 기반 스크롤링
* 모바일용 반응형 동작

네비게이션 메뉴는 일반적으로 헤더와 푸터에 배치돼요.

***

## 네비게이션 메뉴 추가하기

1. 빌더에서 퍼널 또는 웹사이트를 열어요
2. \*\*Add Element(요소 추가)\*\*를 클릭해요
3. \*\*Navigation Menu(네비게이션 메뉴)\*\*를 선택해요
4. 원하는 섹션으로 요소를 드래그해요
5. 요소를 클릭해서 설정을 구성해요

***

## 메뉴 항목 구성하기

네비게이션 메뉴 설정 패널에서 다음을 할 수 있어요:

* 새 메뉴 항목 추가
* 메뉴 라벨 이름 변경
* 내부 페이지 링크 연결
* 외부 URL 링크 연결
* 드롭다운(자식) 항목 추가
* 메뉴 항목 순서 변경

드롭다운을 만들려면:

1. 부모 메뉴 항목을 추가해요
2. 해당 항목 아래의 \*\*Add Sub Item(하위 항목 추가)\*\*을 클릭해요
3. 자식 링크를 구성해요
4. 추가 중첩 항목이 필요하면 반복해요

***

## 줄바꿈 옵션 (새로운 개선사항)

네비게이션 메뉴 요소에 새로운 **줄바꿈(Wrap) 옵션**이 추가됐어요.

활성화하면 줄바꿈 옵션은 가로 공간이 부족할 때 메뉴 항목이 자동으로 다음 줄로 이동할 수 있게 해줘요. 이렇게 하면 레이아웃이 깨지는 것을 방지하고 다양한 화면 크기에서 반응성을 개선해요.

### 왜 중요한가요?

* 메뉴 오버플로우 방지
* 작은 화면에서 반응성 개선
* 깔끔한 헤더 정렬 유지
* 레이아웃 왜곡 감소

다음과 같은 경우에 특히 유용해요:

* 많은 항목이 있는 메뉴
* 긴 메뉴 라벨
* 태블릿과 중간 크기 화면

***

## 서브메뉴 스타일링 개선사항

시각적 일관성과 사용성 개선을 위해 서브메뉴 동작이 향상됐어요.

개선사항은 다음과 같아요:

* 더 안정적인 드롭다운 렌더링
* 더 깔끔한 호버 동작
* 개선된 간격과 정렬
* 기기 간 더 일관된 서브메뉴 스타일링

이러한 업데이트는 시각적 불일치를 해결하고 인터랙션 플로우를 개선해요.

***

## 모바일 동작

네비게이션 메뉴는 모바일 뷰에 자동으로 적응해요. 설정에 따라 메뉴가 햄버거 스타일 레이아웃으로 접힐 수 있어요.

최근 개선사항으로 다음도 보장해요:

* 더 나은 터치 반응성
* 모바일에서 개선된 드롭다운 인터랙션
* 더 일관된 애니메이션 전환

***

## 스타일링 옵션

다음을 커스터마이징할 수 있어요:

* 폰트 스타일
* 폰트 크기
* 메뉴 정렬 (왼쪽, 중앙, 오른쪽)
* 항목 간 간격
* 배경색
* 호버 효과
* 드롭다운 외관

요소 설정 패널의 Style(스타일) 탭을 사용해서 이러한 옵션들을 구성하세요.

***

## 네비게이션 메뉴와 요소로 스크롤 기능 사용하기

네비게이션 메뉴 항목은 페이지의 특정 섹션으로 스크롤하도록 구성할 수 있어요.

최근 업데이트로 스크롤 동작이 이제 갑작스러운 점프 대신 부드러운 스크롤링을 사용해요. 이렇게 하면 페이지 내에서 네비게이션할 때 더 자연스러운 전환을 만들어줘요.

***

## 베스트 프랙티스

* 메뉴 라벨을 간결하게 유지하세요
* 복잡한 네비게이션을 정리하는 데 드롭다운을 사용하세요
* 여러 메뉴 항목을 사용할 때는 줄바꿈을 활성화하세요
* 발행하기 전에 모바일 뷰를 테스트하세요
* 과도한 중첩 서브메뉴 레벨은 피하세요

***

## 자주 묻는 질문

**Q: 줄바꿈 옵션은 무엇을 하나요?** 줄바꿈 옵션은 네비게이션 항목이 사용 가능한 너비를 초과할 때 새 줄로 이동할 수 있게 해서 레이아웃 오버플로우를 방지해요.

**Q: 서브메뉴 개선사항을 위해 설정을 변경해야 하나요?** 아니요. 스타일링과 동작 개선사항은 자동으로 적용돼요.

**Q: 부드러운 스크롤링이 기본으로 활성화되나요?** 네. 요소로 스크롤 액션이 이제 자동으로 부드러운 스크롤링을 사용해요.

**Q: 이것이 발행된 퍼널이나 웹사이트에 영향을 주나요?** 기존 메뉴는 스타일링과 부드러운 스크롤 개선사항의 혜택을 자동으로 받아요. 줄바꿈 옵션은 원한다면 수동으로 활성화해야 해요.

**Q: 이것이 수동 스타일링 설정을 변경하나요?** 아니요. 기존 스타일 구성은 그대로 유지돼요.

***

*원문 최종 수정: Thu, 12 Feb, 2026 at 4:41 PM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/xml-sitemaps/navigation-menus-in-the-highlevel-funnel-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.