내비게이션 바

navbar 컴포넌트는 반응형이며 다재다능한 가로 내비게이션 바입니다. 구조는 다음과 같아요:

navbar: 메인 컨테이너
- navbar-brand: 항상 보이는 왼쪽 부분. 보통 로고와 선택적으로 몇몇 링크나 아이콘을 담습니다
  - navbar-burger: 터치 기기에서 navbar 메뉴를 토글하는 햄버거 아이콘
- navbar-menu: 터치 기기에서는 숨겨지고 데스크톱에서 보이는 오른쪽 부분
  - navbar-start: 데스크톱에서 브랜드 옆에 나타나는 메뉴의 왼쪽 부분
  - navbar-end: navbar 끝에 나타나는 메뉴의 오른쪽 부분
    - navbar-item: navbar의 각 항목. a 또는 div가 될 수 있어요
      - navbar-link: 화살표가 달린 드롭다운의 형제 링크
      - navbar-dropdown: navbar 항목과 구분선을 포함하는 드롭다운 메뉴
        
        navbar-divider: navbar 항목을 구분하는 가로선

출처: 문서

본문

빠르게 시작하려면 완전한 기본 navbar가 이렇게 생겼어요:

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <!-- 여기에 Bulma 로고(SVG)가 들어갑니다 -->
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Documentation</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">About</a>
          <a class="navbar-item is-selected">Jobs</a>
          <a class="navbar-item">Contact</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Report an issue</a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

navbar-brand은 navbar의 왼쪽 부분이에요. 여기에는 여러 개의 navbar-item과 마지막 자식으로 navbar-burger를 담을 수 있습니다.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
</nav>

navbar brand은 터치 기기와 데스크톱(>= 1024px) 모두에서 항상 보입니다. 따라서 작은 기기에서 가로로 넘치지 않도록 navbar 항목은 몇 개만 쓰는 것을 권장해요. 데스크톱(>= 1024px)에서는 navbar brand이 필요한 공간만 차지합니다.

navbar-burger는 터치 기기에서만 나타나는 햄버거 메뉴입니다. navbar-brand의 마지막 자식이어야 하고, 햄버거 선(또는 활성화 시 X자)을 그리기 위해 빈 span 태그 4개를 포함해야 합니다.

<a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

is-active 수식어 클래스를 추가하면 X자 모양으로 바뀝니다.

navbar-menu은 navbar brand의 반대편에 해당합니다. 따라서 navbar의 직계 자식으로, navbar-brand의 형제로 나타나야 합니다.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

navbar-menu은 터치 기기에서는 숨겨지고, 데스크톱(>= 1024px)에서는 navbar에서 사용 가능한 공간을 채우며 navbar brand에는 필요한 만큼만 공간을 남깁니다. 단, 직계 자식으로 두 요소가 필요해요: navbar-start와 navbar-end.

JavaScript 토글 (Javascript toggle)

Bulma 패키지에는 JavaScript가 포함되어 있지 않습니다. 아래는 vanilla JavaScript로 navbar-burger와 대상 navbar-menu 양쪽의 is-active 클래스를 토글하는 구현 예시입니다.

<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navMenu">
  <!-- navbar-start, navbar-end... -->
</div>

document.addEventListener('DOMContentLoaded', () => {
  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {
      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
    });
  });
});
~~~

jQuery로도 같은 작업을 할 수 있어요:

```js
$(document).ready(function() {
  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {
    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
    $(".navbar-burger").toggleClass("is-active");
    $(".navbar-menu").toggleClass("is-active");
  });
});
~~~

기억하세요, 이건 그저 구현 예시입니다. Bulma 패키지에는 JavaScript가 포함되어 있지 않아요.

### Navbar start와 navbar end

`navbar-start`와 `navbar-end`는 `navbar-menu`의 두 직계 자식(유일한 자식)입니다. 데스크톱(`>= 1024px`)에서 `navbar-start`는 왼쪽에, `navbar-end`는 오른쪽에 나타나며, 각각 원하는 만큼의 `navbar-item`을 담을 수 있어요.

~~~html
<div class="navbar-menu">
  <div class="navbar-start">
    <!-- navbar items -->
  </div>

  <div class="navbar-end">
    <!-- navbar items -->
  </div>
</div>
~~~

### Navbar item

`navbar-item`은 반복 가능한 요소로, 다음과 같은 역할을 할 수 있습니다:

**내비게이션 링크**:

~~~html
<a class="navbar-item">
  Home
</a>
~~~

**브랜드 로고용 컨테이너**:

~~~html
<a class="navbar-item">
  <!-- 여기에 브랜드 로고(SVG)가 들어갑니다 -->
</a>
~~~

**드롭다운 메뉴의 부모**:

~~~html
<div class="navbar-item has-dropdown">
  <a class="navbar-link">
    Docs
  </a>
  <div class="navbar-dropdown">
    <!-- Other navbar items -->
  </div>
</div>
~~~

**navbar 드롭다운의 자식**:

~~~html
<div class="navbar-dropdown">
  <a class="navbar-item">
    Overview
  </a>
</div>
~~~

**`field`처럼 거의 무엇이든 담는 컨테이너**:

~~~html
<div class="navbar-item">
  <div class="field is-grouped">
    <p class="control">
      <a class="button">
        <span class="icon">
          <i class="fas fa-twitter" aria-hidden="true"></i>
        </span>
        <span>Tweet</span>
      </a>
    </p>
    <p class="control">
      <a class="button is-primary">
        <span class="icon">
          <i class="fas fa-download" aria-hidden="true"></i>
        </span>
        <span>Download</span>
      </a>
    </p>
  </div>
</div>
~~~

`navbar-item`은 앵커 태그 `<a>` 또는 `<div>`가 될 수 있으며, `navbar`, `navbar-brand`, `navbar-start`, `navbar-end`, `navbar-dropdown`의 직계 자식으로 들어갑니다.

다음 수식어 클래스도 추가할 수 있어요:
- `is-expanded`: 전체 너비 요소로 만듭니다
- `is-tab`: 호버 시 아래 테두리를 추가하고, `is-active`로 아래 테두리를 표시합니다

### 투명 Navbar (Transparent navbar)

navbar를 어떤 시각적 맥락에도 자연스럽게 녹아들게 하려면 `navbar` 컴포넌트에 `is-transparent` 수식어를 추가하세요. 그러면 navbar 항목의 호버·활성 배경이 제거됩니다.

~~~html
<nav class="navbar is-transparent">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <!-- 여기에 Bulma 로고(SVG)가 들어갑니다 -->
    </a>
    <div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div id="navbarExampleTransparentExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">Docs</a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item">Overview</a>
          <a class="navbar-item">Modifiers</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Columns</a>
          <a class="navbar-item is-selected">Layout</a>
          <a class="navbar-item">Form</a>
          <a class="navbar-item">Elements</a>
          <a class="navbar-item">Components</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="button">
              <span class="icon">
                <i class="fab fa-twitter"></i>
              </span>
              <span>Tweet</span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>
~~~

### 고정 Navbar (Fixed navbar)

navbar를 페이지 상단 또는 하단에 고정할 수 있어요. 두 가지 단계로 진행됩니다:

1. `navbar` 컴포넌트에 `is-fixed-top` 또는 `is-fixed-bottom`을 추가합니다.

~~~html
<nav class="navbar is-fixed-top">
~~~

2. 페이지에 적절한 패딩을 주기 위해 `<html>` 또는 `<body>` 요소에 `has-navbar-fixed-top` 또는 `has-navbar-fixed-bottom` 수식어를 추가합니다.

~~~html
<html class="has-navbar-fixed-top">
~~~

### 드롭다운 메뉴 (Dropdown menu)

드롭다운 메뉴를 만들려면 4가지 요소가 필요합니다:
- `has-dropdown` 수식어가 붙은 `navbar-item`
- 드롭다운 화살표가 들어 있는 `navbar-link`
- `navbar-item`과 `navbar-divider`의 인스턴스를 담을 수 있는 `navbar-dropdown`

~~~html
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown">
    <a class="navbar-link">
      Docs
    </a>
    <div class="navbar-dropdown">
      <a class="navbar-item">Overview</a>
      <a class="navbar-item">Elements</a>
      <a class="navbar-item">Components</a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 1.0.4
      </div>
    </div>
  </div>
</nav>
~~~

#### CSS 또는 JavaScript로 드롭다운 표시/숨김

`navbar-dropdown`은 터치 기기에서는 보이고 데스크톱(`>= 1024px`)에서는 숨겨집니다. 데스크톱에서 드롭다운이 어떻게 표시되는지는 부모 클래스에 따라 달라집니다.

`has-dropdown` 수식어가 붙은 `navbar-item`에는 2가지 추가 수식어가 있어요:
- `is-hoverable`: 부모 `navbar-item`에 마우스를 올리면 드롭다운이 나타납니다
- `is-active`: 항상 드롭다운이 표시됩니다

~~~html
<div class="navbar-item has-dropdown is-hoverable">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>
~~~

~~~html
<div class="navbar-item has-dropdown is-active">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>
~~~

#### 오른쪽 드롭다운 (Right dropdown)

부모 `navbar-item`이 오른쪽에 있다면, `is-right` 수식어를 사용해 드롭다운이 오른쪽에서 시작하도록 배치할 수 있어요.

~~~html
<div class="navbar-dropdown is-right">
  <!-- navbar-item, navbar-divider etc. -->
</div>
~~~

#### 드롭업 (Dropup)

고정 하단 navbar처럼 navbar가 페이지 하단에 있다면 드롭업 메뉴를 쓰고 싶을 거예요. 부모 `navbar-item`에 `has-dropdown`과 `has-dropdown-up` 수식어를 추가하면 됩니다.

~~~html
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
  <a class="navbar-link" href="#">
    Docs
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item">Overview</a>
  </div>
</div>
~~~

#### 화살표 없는 드롭다운 (Dropdown without arrow)

navbar 항목에 `is-arrowless` 수식어를 추가하면 화살표를 제거할 수 있어요.

~~~html
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Link without arrow
  </a>
  <!-- navbar-dropdowns -->
</div>
~~~

#### 드롭다운 메뉴 스타일 (Styles for the dropdown menu)

기본적으로 `navbar-dropdown`은:
- 회색 `border-top`을 가집니다
- 아래쪽 두 모서리에 `border-radius`를 가집니다

투명 navbar를 사용할 때는 `is-boxed` 수식어로 박스형 드롭다운을 쓰는 것이 좋아요. `is-boxed`는:
- 회색 테두리를 제거합니다
- 은은한 내부 그림자를 추가합니다
- 모든 모서리를 둥글게 만듭니다
- 호버/활성 상태를 애니메이션화합니다

~~~html
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <!-- 여기에 Bulma 로고(SVG)가 들어갑니다 -->
  </a>
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">Docs</a>
    <div class="navbar-dropdown is-boxed">
      <a class="navbar-item">Overview</a>
      <a class="navbar-item">Elements</a>
      <a class="navbar-item">Components</a>
      <hr class="navbar-divider">
      <div class="navbar-item">Version 1.0.4</div>
    </div>
  </div>
</nav>
~~~

#### 활성 드롭다운 navbar item (Active dropdown navbar item)

드롭다운 안의 항목에도 `is-active`를 사용할 수 있으며, 특정 항목을 강조하려면 `is-selected` 수식어를 쓸 수 있어요.

~~~html
<div class="navbar-dropdown">
  <a class="navbar-item">Overview</a>
  <a class="navbar-item is-selected">Elements</a>
  <a class="navbar-item">Components</a>
  <hr class="navbar-divider">
  <div class="navbar-item">Version 1.0.4</div>
</div>
~~~

#### 드롭다운 구분선 (Dropdown divider)

`navbar-dropdown` 안에 가로선을 표시하려면 `navbar-divider`를 추가하면 됩니다.

~~~html
<hr class="navbar-divider">
~~~

### 색상 (Colors)

`navbar`의 배경색은 9가지 색상 수식어 중 하나로 바꿀 수 있어요: `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-dark`, `is-light`, `is-white`.

~~~html
<nav class="navbar is-primary">
  <!-- navbar brand, navbar menu... -->
</nav>
~~~

### Navbar 헬퍼 클래스 (Navbar Helper Classes)

| Type | Name | Description |
|---|---|---|
| Spacing | `is-spaced` | 상하 패딩을 1rem, 좌우 패딩을 2rem으로 설정합니다 |
| Shading | `has-shadow` | navbar 주변에 약간의 box-shadow를 추가합니다 |

### Sass 및 CSS 변수 (Sass and CSS variables)

| Sass 변수 | CSS 변수 | 값 |
|---|---|---|
| `$navbar-background-color` | `var(--bulma-navbar-background-color)` | `var(--bulma-scheme-main)` |
| `$navbar-box-shadow-size` | `var(--bulma-navbar-box-shadow-size)` | `0 0.125em 0 0` |
| `$navbar-box-shadow-color` | `var(--bulma-navbar-box-shadow-color)` | `var(--bulma-background)` |
| `$navbar-height` | `var(--bulma-navbar-height)` | `3.25rem` |
| `$navbar-padding-vertical` | `var(--bulma-navbar-padding-vertical)` | `1rem` |
| `$navbar-padding-horizontal` | `var(--bulma-navbar-padding-horizontal)` | `2rem` |
| `$navbar-z` | `var(--bulma-navbar-z)` | `30` |
| `$navbar-fixed-z` | `var(--bulma-navbar-fixed-z)` | `30` |
| `$navbar-item-img-max-height` | `var(--bulma-navbar-item-img-max-height)` | `1.75rem` |
| `$navbar-burger-color` | `var(--bulma-navbar-burger-color)` | `var(--bulma-navbar-item-color)` |
| `$navbar-tab-hover-background-color` | `var(--bulma-navbar-tab-hover-background-color)` | `transparent` |
| `$navbar-tab-hover-border-bottom-color` | `var(--bulma-navbar-tab-hover-border-bottom-color)` | `var(--bulma-link)` |
| `$navbar-tab-active-color` | `var(--bulma-navbar-tab-active-color)` | `var(--bulma-link)` |
| `$navbar-tab-active-background-color` | `var(--bulma-navbar-tab-active-background-color)` | `transparent` |
| `$navbar-tab-active-border-bottom-color` | `var(--bulma-navbar-tab-active-border-bottom-color)` | `var(--bulma-link)` |
| `$navbar-tab-active-border-bottom-style` | `var(--bulma-navbar-tab-active-border-bottom-style)` | `solid` |
| `$navbar-tab-active-border-bottom-width` | `var(--bulma-navbar-tab-active-border-bottom-width)` | `0.1875em` |
| `$navbar-dropdown-background-color` | `var(--bulma-navbar-dropdown-background-color)` | `var(--bulma-scheme-main)` |
| `$navbar-dropdown-border-l` | `var(--bulma-navbar-dropdown-border-l)` | `var(--bulma-border-l)` |
| `$navbar-dropdown-border-color` | `var(--bulma-navbar-dropdown-border-color)` | `hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-dropdown-border-l))` |
| `$navbar-dropdown-border-style` | `var(--bulma-navbar-dropdown-border-style)` | `solid` |
| `$navbar-dropdown-border-width` | `var(--bulma-navbar-dropdown-border-width)` | `0.125em` |
| `$navbar-dropdown-offset` | `var(--bulma-navbar-dropdown-offset)` | `-0.25em` |
| `$navbar-dropdown-arrow` | `var(--bulma-navbar-dropdown-arrow)` | `var(--bulma-link)` |
| `$navbar-dropdown-radius` | `var(--bulma-navbar-dropdown-radius)` | `var(--bulma-radius-large)` |
| `$navbar-dropdown-z` | `var(--bulma-navbar-dropdown-z)` | `20` |
| `$navbar-dropdown-boxed-radius` | `var(--bulma-navbar-dropdown-boxed-radius)` | `var(--bulma-radius-large)` |
| `$navbar-dropdown-boxed-shadow` | `var(--bulma-navbar-dropdown-boxed-shadow)` | `0 0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1)` |
| `$navbar-divider-background-l` | `var(--bulma-navbar-divider-background-l)` | `var(--bulma-background-l)` |
| `$navbar-divider-height` | `var(--bulma-navbar-divider-height)` | `0.125em` |
| `$navbar-bottom-box-shadow-size` | `var(--bulma-navbar-bottom-box-shadow-size)` | `0 -0.125em 0 0` |

## 더 알아보기 (Learn more)

- [Dropdown 컴포넌트](https://bulma.io/documentation/components/dropdown/)
- [Menu 컴포넌트](https://bulma.io/documentation/components/menu/)

내비게이션 바

내비게이션 바 (Navbar)

본문

기본 Navbar (Basic Navbar)

Navbar brand

Navbar burger

Navbar menu

JavaScript 토글 (Javascript toggle)