syidaxdesign system
홈 가격 내 정보
Components탐색

Navigation

그룹과 접을 수 있는 하위 메뉴로 앱의 화면 이동을 구성합니다.

<sy-nav>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-nav>
  <sy-nav-group title="워크스페이스">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-group>
  <sy-nav-sub title="프로젝트" open>
    <sy-nav-item value="website">홈페이지</sy-nav-item>
    <sy-nav-sub title="컴포넌트">
      <sy-nav-item value="core">Design System</sy-nav-item>
      <sy-nav-item value="charts">Charts</sy-nav-item>
    </sy-nav-sub>
  </sy-nav-sub>
</sy-nav>

사용 가이드

#

앱의 주요 화면을 오가는 지속적인 탐색 메뉴입니다. 일시적인 명령 목록에는 Menu나 Dropdown을 사용하세요.

항상 보이는 그룹

nav-group으로 제목이 있는 메뉴 묶음을 만듭니다.

접을 수 있는 하위 메뉴

nav-sub로 하위 항목을 펼치고 접게 합니다.

예제

#

단일 메뉴

선택한 항목을 강조하고 고유한 value를 이벤트로 전달합니다.

코드 보기
HTML
<sy-nav>
  <sy-nav-item value="overview">개요</sy-nav-item>
  <sy-nav-item value="members">구성원</sy-nav-item>
  <sy-nav-item value="settings" disabled>설정</sy-nav-item>
</sy-nav>

그룹과 하위 메뉴

워크스페이스와 프로젝트를 구분하고 여러 단계의 하위 메뉴를 구성합니다.

코드 보기
HTML
<sy-nav>
  <sy-nav-group title="워크스페이스">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-group>
  <sy-nav-sub title="프로젝트" open>
    <sy-nav-item value="website">홈페이지</sy-nav-item>
    <sy-nav-sub title="컴포넌트">
      <sy-nav-item value="core">Design System</sy-nav-item>
      <sy-nav-item value="charts">Charts</sy-nav-item>
    </sy-nav-sub>
  </sy-nav-sub>
</sy-nav>

전체 비활성화

메뉴를 비활성화하면 하위 항목의 선택과 펼침도 제한됩니다.

코드 보기
HTML
<sy-nav disabled>
  <sy-nav-group title="워크스페이스">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-group>
  <sy-nav-sub title="프로젝트" open>
    <sy-nav-item value="website">홈페이지</sy-nav-item>
    <sy-nav-sub title="컴포넌트">
      <sy-nav-item value="core">Design System</sy-nav-item>
      <sy-nav-item value="charts">Charts</sy-nav-item>
    </sy-nav-sub>
  </sy-nav-sub>
</sy-nav>

하위 메뉴 외부 제어

setOpen·setClose·setTrigger로 하위 메뉴의 펼침 상태를 제어합니다.

코드 보기
HTML
<sy-nav>
  <sy-nav-sub title="프로젝트" id="sample">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-sub>
</sy-nav>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">펼치기</sy-button>
  <sy-button id="action-1" size="small">접기</sy-button>
  <sy-button id="action-2" size="small">전환</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.setTrigger();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-nav>
  <sy-nav-group title="워크스페이스">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-group>
  <sy-nav-sub title="프로젝트" open>
    <sy-nav-item value="website">홈페이지</sy-nav-item>
    <sy-nav-sub title="컴포넌트">
      <sy-nav-item value="core">Design System</sy-nav-item>
      <sy-nav-item value="charts">Charts</sy-nav-item>
    </sy-nav-sub>
  </sy-nav-sub>
</sy-nav>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

접힌 메뉴 그룹

처음에 접혀 있는 메뉴 그룹을 펼쳐 하위 페이지를 확인합니다.

코드 보기
HTML
<sy-nav id="supplement-1">
  <sy-nav-group title="워크스페이스">
    <sy-nav-item value="overview">개요</sy-nav-item>
    <sy-nav-item value="members">구성원</sy-nav-item>
    <sy-nav-item value="settings" disabled>설정</sy-nav-item>
  </sy-nav-group>
  <sy-nav-sub title="프로젝트">
    <sy-nav-item value="website">홈페이지</sy-nav-item>
    <sy-nav-sub title="컴포넌트">
      <sy-nav-item value="core">Design System</sy-nav-item>
      <sy-nav-item value="charts">Charts</sy-nav-item>
    </sy-nav-sub>
  </sy-nav-sub>
</sy-nav>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {});
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-nav>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.

<sy-nav-item>

Properties

Attribute / PropertyTypeDefaultDescription
string''현재 값 또는 항목의 식별 값입니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
number0메뉴 들여쓰기 단계입니다. 부모 메뉴가 계산합니다.

Events

EventDetailDescription
CustomEvent<string>Value of the activated navigation item. The application owns routing.

Methods

MethodReturnsDescription
Promise<void>상위 메뉴의 비활성화 상태를 전달합니다. 일반 사용에서는 부모가 관리합니다.
Promise<void>메뉴 그룹 안의 항목 스타일을 지정합니다. 부모가 관리합니다.
Promise<void>메뉴 항목의 선택 표시를 변경합니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.

<sy-nav-sub>

Properties

Attribute / PropertyTypeDefaultDescription
string''접을 수 있는 하위 메뉴의 제목입니다. HTML 속성은 title입니다.
string''현재 값 또는 항목의 식별 값입니다.
booleanfalse하위 메뉴가 펼쳐진 상태입니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
number0메뉴 들여쓰기 단계입니다. 부모 메뉴가 계산합니다.

Events

EventDetailDescription
CustomEvent<string>Submenu value, emitted when its expanded state changes.

Methods

MethodReturnsDescription
Promise<void>상위 메뉴의 비활성화 상태를 전달합니다. 일반 사용에서는 부모가 관리합니다.
Promise<void>메뉴 그룹 안의 항목 스타일을 지정합니다. 부모가 관리합니다.
Promise<void>하위 메뉴를 펼치거나 접습니다.
Promise<void>하위 메뉴를 펼칩니다.
Promise<void>항목을 닫습니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.

<sy-nav-group>

Properties

Attribute / PropertyTypeDefaultDescription
string''메뉴 그룹의 제목입니다. HTML 속성은 title입니다.
number0메뉴 들여쓰기 단계입니다. 부모 메뉴가 계산합니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기