Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Dropdown

Usage

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:


        <div class="dropdown btn primary">
          <div>
            Drop Down
          </div>
          <ul class="dropdown-menu">
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>
            <li><a href="#!">Link 4</a></li>
          </ul>
        </div>
        

Multilevel Dropdown

You can create mutlilevel Dropdown Menu using Butter Cake.

Can change inner dropdown alignment to left or right by adding .dropdown-right or .dropdown-left class to .inner-dropdown, Drop downs are responsive below 790px.


        <div class="dropdown btn primary">
          <div>
            Drop Down Right
          </div>
          <ul class="dropdown-menu">
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>

            <!-- SECOND DROPDOWN -->
            <li class="dropdown inner-dropdown dropdown-right">
              <a href="#!">Drop Down</a>
              <ul class="dropdown-menu">
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>
              </ul>
            </li>

          </ul>
        </div>
        

Dropdown Left Aligned


        <div class="dropdown btn primary">
          <div>
            Drop Down Right
          </div>
          <ul class="dropdown-menu">
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>

            <!-- SECOND DROPDOWN -->
            <li class="dropdown inner-dropdown dropdown-left">
              <a href="#!">Drop Down</a>
              <ul class="dropdown-menu">
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>
              </ul>
            </li>

          </ul>
        </div>
        

Dropdown Nested

You can keep nesting Multilevel Dropdown Endlessly


        <div class="dropdown btn primary">
          <div>
            Drop Down
          </div>
          <ul class="dropdown-menu">
            <li><a href="#!">Link 2</a></li>
            <li><a href="#!">Link 3</a></li>

            <!-- SECOND DROPDOWN -->
            <li class="dropdown inner-dropdown dropdown-right">
              <a href="#!">Drop Down</a>
              <ul class="dropdown-menu">
                <li><a href="#!">Link 2</a></li>
                <li><a href="#!">Link 3</a></li>

                <!-- THIRD DROPDOWN -->
                <li class="dropdown inner-dropdown dropdown-right">
                  <a href="#!">Drop Down</a>
                  <ul class="dropdown-menu">
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                  </ul>
                </li>

              </ul>
            </li>

          </ul>
        </div>
        

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon