Menu Bar

<div class="c-menu-bar">
  <div class="c-field-group c-field-group--merged">
    <div class="c-dropdown">
      <div class="c-dropdown__trigger">
        <button
          slot="trigger"
          class="c-button"
        >
          <span class="c-button__label">Complex Menu</span>
          <span
            class="c-button__chevron c-icon c-icon--extra-small"
          >
            <!-- SVG element -->
          </span>
        </button>
      </div>
      <div class="c-dropdown__content">
        <div class="c-menu">
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">Start</div>
              </div>
            </a>
          </div>
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">Nested Menu</div>
              </div>
              <div
                class="c-menu__chevron c-icon c-icon--extra-small"
              >
                <!-- SVG element -->
              </div>
            </a>
            <div class="c-dropdown">
              <div class="c-dropdown__content">
                <div class="c-menu">
                  <div class="c-menu__item">
                    <a
                      href="#"
                      class="c-menu__link"
                    >
                      <div class="c-menu__text">
                        <div class="c-menu__label">
                          Subitem 1
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="c-menu__item">
                    <a
                      href="#"
                      class="c-menu__link"
                    >
                      <div class="c-menu__text">
                        <div class="c-menu__label">
                          Subitem 2
                        </div>
                      </div>
                      <div
                        class="c-menu__chevron c-icon c-icon--extra-small"
                      >
                        <!-- SVG element -->
                      </div>
                    </a>
                    <div class="c-dropdown">
                      <div class="c-dropdown__content">
                        <div class="c-menu">
                          <div class="c-menu__item">
                            <a
                              href="#"
                              class="c-menu__link"
                            >
                              <div class="c-menu__text">
                                <div class="c-menu__label">
                                  Deep nested item 1
                                </div>
                              </div>
                            </a>
                          </div>
                          <div class="c-menu__item">
                            <a
                              href="#"
                              class="c-menu__link"
                            >
                              <div class="c-menu__text">
                                <div class="c-menu__label">
                                  Deep nested item 2
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="c-menu__item">
                    <a
                      href="#"
                      class="c-menu__link"
                    >
                      <div class="c-menu__text">
                        <div class="c-menu__label">
                          Subitem 3
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">End</div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="c-dropdown">
      <div class="c-dropdown__trigger">
        <button
          slot="trigger"
          class="c-button"
        >
          <span class="c-button__label">Simple Menu</span>
          <span
            class="c-button__chevron c-icon c-icon--extra-small"
          >
            <!-- SVG element -->
          </span>
        </button>
      </div>
      <div class="c-dropdown__content">
        <div class="c-menu">
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">Option 1</div>
              </div>
            </a>
          </div>
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">Option 2</div>
              </div>
            </a>
          </div>
          <div class="c-menu__item">
            <a
              href="#"
              class="c-menu__link"
            >
              <div class="c-menu__text">
                <div class="c-menu__label">Option 3</div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>