Edit these docs

Sidebar

eCommerce sidebar

Set of design blocks dedicated to building eCommerce sidebars.

See also a page fully composed of the following elements.

Shop Demo

Product categories

Subcategories

return to Clothing, Shoes, Accessories

Dresses

Tops, Tees & Blouses

Sweaters

Fashion Hoodies & Sweatshirts

Jeans

Pants

Skirts

Shorts

Leggings

Active

Swimsuits & Cover Ups

Lingerie, Sleep & Lounge

Jumpsuits, Rompers & Overalls

Coats, Jackets & Vests

Suiting & Blazers

Socks & Hosiery



          <!-- Section: Categories -->
          <section>

            <h5>Subcategories</h5>
            
            <div class="text-muted small text-uppercase mb-5">
              <p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes, Accessories</strong></a></p>
            
              <p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Pants</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Skirts</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Shorts</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Leggings</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Active</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Swimsuits & Cover Ups</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Lingerie, Sleep & Lounge</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Jumpsuits, Rompers & Overalls</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Coats, Jackets & Vests</a></p>
              <p class="mb-3"><a href="#!" class="card-link-secondary">Suiting & Blazers</a></p>
              <p class="mb-0"><a href="#!" class="card-link-secondary">Socks & Hosiery</a></p>
            </div>

          </section>
          <!-- Section: Categories -->

Checkbox filter

Condition


          <!-- Section: Condition -->
          <section class="mb-4">

            <h6 class="font-weight-bold mb-3">Condition</h6>

            <div class="form-check pl-0 mb-3">
              <input type="checkbox" class="form-check-input filled-in" id="new">
              <label class="form-check-label small text-uppercase card-link-secondary" for="new">New</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="checkbox" class="form-check-input filled-in" id="used">
              <label class="form-check-label small text-uppercase card-link-secondary" for="used">Used</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="checkbox" class="form-check-input filled-in" id="collectible">
              <label class="form-check-label small text-uppercase card-link-secondary" for="collectible">Collectible</label>
            </div>
            <div class="form-check pl-0 mb-3 pb-1">
              <input type="checkbox" class="form-check-input filled-in" id="renewed">
              <label class="form-check-label small text-uppercase card-link-secondary" for="renewed">Renewed</label>
            </div>

          </section>
          <!-- Section: Condition -->

Rating filter

Avg. Customer Review

  • & Up

  • & Up

  • & Up

  • & Up

 


          <!-- Section: Average -->
          <section class="mb-4">

            <h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>

            <a href="#!">
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <p class="small text-uppercase card-link-secondary px-2">& Up</p>
                </li>
              </ul>
            </a>
            <a href="#!">
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <p class="small text-uppercase card-link-secondary px-2">& Up</p>
                </li>
              </ul>
            </a>
            <a href="#!">
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <p class="small text-uppercase card-link-secondary px-2">& Up</p>
                </li>
              </ul>
            </a>
            <a href="#!">
              <ul class="rating">
                <li>
                  <i class="fas fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <i class="far fa-star fa-sm text-primary"></i>
                </li>
                <li>
                  <p class="small text-uppercase card-link-secondary px-2">& Up</p>
                </li>
              </ul>
            </a>

          </section>
          <!-- Section: Average -->

Radio buttons filter

Price


          <!-- Section: Price -->
          <section class="mb-4">

            <h6 class="font-weight-bold mb-3">Price</h6>

            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="under25" name="materialExampleRadios">
              <label class="form-check-label small text-uppercase card-link-secondary" for="under25">Under $25</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="2550" name="materialExampleRadios">
              <label class="form-check-label small text-uppercase card-link-secondary" for="2550">$25 to $50</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="50100" name="materialExampleRadios">
              <label class="form-check-label small text-uppercase card-link-secondary" for="50100">$50 to $100</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="100200" name="materialExampleRadios">
              <label class="form-check-label small text-uppercase card-link-secondary" for="100200">$100 to $200</label>
            </div>
            <div class="form-check pl-0 mb-3">
              <input type="radio" class="form-check-input" id="200above" name="materialExampleRadios">
              <label class="form-check-label small text-uppercase card-link-secondary" for="200above">$200 & Above</label>
            </div>

          </section>
          <!-- Section: Price -->

Input fields filter

Price

- 



          <!-- Section: Price -->
          <section class="mb-4">

            <h6 class="font-weight-bold mb-3">Price</h6>
            
            <form>
              <div class="d-flex align-items-center mt-4 pb-1">
                <div class="md-form md-outline my-0">
                  <input id="from" type="text" class="form-control mb-0">
                  <label for="form">$ Min</label>
                </div>
                <p class="px-2 mb-0 text-muted"> - </p>
                <div class="md-form md-outline my-0">
                  <input id="to" type="text" class="form-control mb-0">
                  <label for="to">$ Max</label>
                </div>
              </div>
            </form>

          </section>
          <!-- Section: Price -->

Slider filter

Price
$0
$100 


          <!-- Section: Price version 2 -->
          <section class="mb-4">

            <h6 class="font-weight-bold mb-3">Price</h6>

            <div class="slider-price d-flex align-items-center my-4">
              <span class="font-weight-normal small text-muted mr-2">$0</span>
              <form class="multi-range-field w-100 mb-1">
                <input id="multi1" class="multi-range" type="range" />
              </form>
              <span class="font-weight-normal small text-muted ml-2">$100</span>
            </div>

          </section>
          <!-- Section: Price version 2 -->
  
        


          $('#multi1').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });

Buttons filter

Color


        <!-- Section: Color -->
        <section class="mb-4">

          <h6 class="font-weight-bold mb-3">Color</h6>

          <div class="btn-group btn-group-toggle btn-color-group d-block mt-n2 ml-n2" data-toggle="buttons">
            <label class="btn rounded-circle white border-inset-grey p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle grey p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle black p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle green p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle blue p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle purple p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle yellow p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle indigo p-3 m-2">
              <input type="checkbox" checked autocomplete="off">
            </label>
            <label class="btn rounded-circle red p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
            <label class="btn rounded-circle orange p-3 m-2">
              <input type="checkbox" autocomplete="off">
            </label>
          </div>

        </section>
        <!-- Section: Color -->