Navbar | HTML Components

기본

navbar_item · navbar_link으로 메뉴를 구성합니다. is-active와 aria-current="page"로 현재 페이지를 표시합니다.

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="../index.html" class="navbar_brand">UXKM</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="../index.html" class="navbar_link is-active" aria-current="page">홈</a>
            </li>
            <li class="navbar_item">
              <a href="button.html" class="navbar_link">컴포넌트</a>
            </li>
            <li class="navbar_item">
              <a href="../design-tokens.html" class="navbar_link">토큰</a>
            </li>
            <li class="navbar_item">
              <a href="../getting-started.html" class="navbar_link">시작하기</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

브랜드

navbar_brand에 navbar_brand-icon을 함께 배치할 수 있습니다.

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">
        <svg class="navbar_brand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="2"/>
          <path d="M9 3v18"/>
        </svg>
        HTML Components
      </a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">가이드</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">리소스</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

액션 영역

navbar_actions에 버튼·아바타 등을 배치합니다. 버튼 컴포넌트와 조합해 사용합니다.

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Dashboard</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">개요</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">분석</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">설정</a>
            </li>
          </ul>
        </nav>
        <div class="navbar_actions">
          <button type="button" class="btn btn_ghost btn_sm" aria-label="알림">
            <svg class="btn_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
              <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
            </svg>
          </button>
          <button type="button" class="btn btn_outline btn_sm">
            <span class="btn_label">로그인</span>
          </button>
          <button type="button" class="btn btn_filled color_primary btn_sm">
            <span class="btn_label">가입</span>
          </button>
        </div>
      </div>
    </div>
  </header>
</div>

검색

navbar_search에 input 컴포넌트를 넣어 검색 필드를 제공합니다.

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Docs</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link">시작하기</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">컴포넌트</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">패턴</a>
            </li>
          </ul>
        </nav>
        <div class="navbar_search">
          <input type="search" id="navbar-search-demo" class="input input_sm" placeholder="문서 검색…" autocomplete="off" aria-label="문서 검색">
        </div>
        <div class="navbar_actions">
          <button type="button" class="btn btn_filled color_primary btn_sm">
            <span class="btn_label">GitHub</span>
          </button>
        </div>
      </div>
    </div>
  </header>
</div>

크기

navbar_sm · navbar_lg로 높이를 조절합니다.

<!-- 주요 메뉴 -->

<div class="navbar_demo">
  <header class="navbar navbar_sm">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Small</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">메뉴</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

<!-- 주요 메뉴 -->

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Default</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">메뉴</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

<!-- 주요 메뉴 -->

<div class="navbar_demo">
  <header class="navbar navbar_lg">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Large</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">메뉴</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

스타일 변형

navbar_borderless · navbar_dark · navbar_sticky로 외형을 바꿉니다.

스크롤해 보세요. navbar_sticky는 상단에 고정됩니다.

콘텐츠 영역 예시입니다.

추가 콘텐츠…

<!-- 주요 메뉴 -->

<div class="navbar_demo">
  <header class="navbar navbar_borderless">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Borderless</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">홈</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">소개</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

<!-- 주요 메뉴 -->

<div class="navbar_demo">
  <header class="navbar navbar_dark">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Dark Surface</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">홈</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">소개</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

<!-- 스크롤해 보세요. navbar_sticky는 상단에 고정됩니다. -->

<div class="navbar_demo navbar_demo-scroll">
  <header class="navbar navbar_sticky">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Sticky</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">고정</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div style="padding: var(--space-xl); color: var(--color-text-muted); font-size: var(--text-size-sm);">
    <p style="margin: 0 0 var(--space-md);">스크롤해 보세요. navbar_sticky는 상단에 고정됩니다.</p>
    <p style="margin: 0;">콘텐츠 영역 예시입니다.</p>
    <p style="margin: var(--space-md) 0 0;">추가 콘텐츠…</p>
    <p style="margin: var(--space-md) 0 0;">추가 콘텐츠…</p>
  </div>
</div>

배지

메뉴 항목에 badge 컴포넌트를 함께 사용할 수 있습니다.

<div class="navbar_demo">
  <header class="navbar">
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Inbox</a>
      <div class="navbar_collapse">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">받은편지함</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">
                알림
                <span class="badge color_danger">3</span>
              </a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">보관함</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

반응형

768px 미만에서 navbar_toggle이 표시되고 메뉴가 접힙니다. aria-expanded · aria-controls · aria-label을 지정합니다.

<div class="navbar_demo">
  <header class="navbar" data-navbar>
    <div class="navbar_container">
      <a href="#" class="navbar_brand">Mobile</a>
      <button type="button" class="navbar_toggle" data-navbar-toggle aria-expanded="false" aria-controls="navbar-responsive-demo" aria-label="메뉴 열기">
        <svg class="navbar_toggle-icon-open" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
        <svg class="navbar_toggle-icon-close" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M18 6 6 18M6 6l12 12"/>
        </svg>
      </button>
      <div class="navbar_collapse" id="navbar-responsive-demo">
        <nav class="navbar_nav" aria-label="주요 메뉴">
          <ul class="navbar_list">
            <li class="navbar_item">
              <a href="#" class="navbar_link is-active" aria-current="page">홈</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">제품</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">가격</a>
            </li>
            <li class="navbar_item">
              <a href="#" class="navbar_link">문의</a>
            </li>
          </ul>
        </nav>
        <div class="navbar_actions">
          <button type="button" class="btn btn_outline btn_sm">
            <span class="btn_label">로그인</span>
          </button>
          <button type="button" class="btn btn_filled color_primary btn_sm">
            <span class="btn_label">시작하기</span>
          </button>
        </div>
      </div>
    </div>
  </header>
</div>

마크업

토글에는 aria-expanded · aria-controls · aria-label을 지정하고, 현재 페이지 링크에는 is-active와 aria-current="page"를 함께 사용합니다.

<header class="navbar navbar_sticky" data-navbar>
  <div class="navbar_container">
    <a href="#" class="navbar_brand">Brand</a>
    <button type="button" class="navbar_toggle" data-navbar-toggle
      aria-expanded="false" aria-controls="main-nav" aria-label="메뉴 열기">…</button>
    <div class="navbar_collapse" id="main-nav">
      <nav class="navbar_nav" aria-label="주요 메뉴">
        <ul class="navbar_list">
          <li class="navbar_item">
            <a href="#" class="navbar_link is-active" aria-current="page">홈</a>
          </li>
        </ul>
      </nav>
      <div class="navbar_search"><input class="input input_sm" type="search"></div>
      <div class="navbar_actions">…</div>
    </div>
  </div>
</header>

클래스 · 속성

이름	설명
`navbar · navbar_container · navbar_brand`	루트·컨테이너·브랜드
`navbar_toggle · navbar_collapse · navbar_nav · navbar_list`	토글·접힘 영역·내비
`navbar_item · navbar_link`	항목·링크 (`is-active`)
`navbar_search · navbar_actions`	검색·액션 영역
`navbar_sm · navbar_lg · navbar_sticky · navbar_borderless · navbar_dark`	크기·변형
`data-navbar · data-navbar-toggle`	반응형 JS 연동
`data-ripple`	브랜드·메뉴 링크·토글 버튼의 클릭 파장 활성
`data-ripple="false" · data-no-ripple`	해당 요소 또는 Navbar 하위 전체 클릭 파장 비활성

디자인 토큰

토큰	기본값	설명
`--navbar-height` · `--navbar-height-sm` · `--navbar-height-lg`	—	높이 변형
`--navbar-padding-x` · `--navbar-gap`	—	패딩·간격
`--navbar-z-index`	—	sticky 레이어