메뉴

메뉴 (Menu)

Bulma menu는 세로 내비게이션 컴포넌트로, 다음과 같은 요소로 구성됩니다:

• menu 컨테이너
• 정보를 알려주는 menu-label 라벨
• 최대 2단계까지 중첩할 수 있는 상호작용형 menu-list 목록

출처: 문서

본문

<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li>
      <a class="is-active">Manage Your Team</a>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    <li><a>Invitations</a></li>
    <li><a>Cloud Storage Environment Settings</a></li>
    <li><a>Authentication</a></li>
  </ul>
  <p class="menu-label">Transactions</p>
  <ul class="menu-list">
    <li><a>Payments</a></li>
    <li><a>Transfers</a></li>
    <li><a>Balance</a></li>
  </ul>
</aside>

menu-list는 ul 안의 ul로 중첩할 수 있으며, 최대 2단계까지 지원해요. is-active 클래스로 현재 선택된 항목을 강조할 수 있습니다.

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Breadcrumb 컴포넌트
• Panel 컴포넌트