Drawer

VISPA-UI includes an expertly-crafted 4 varieties of Drawers which can make your UI building experience effortless.

Basic Drawer

To use the Basic Drawer component copy the below mentioned code and paste it in your drawer's container. Make sure to give a width to your container. We've made our drawer flexible and it takes 100% width of the container.

Home

My Courses

My Cart

LIBRARY

Messages

Community

Albums

DASHBOARD

HTML5

CSS3

JavaScript

React

Node

My Account

Profile

Security

Settings

Body Title

Lorem, ipsum dolor sit amet consectetur adipisicing elit. In assumenda magni, tenetur minus tempore illum numquam reiciendis ipsam excepturi ab libero necessitatibus dolor esse debitis, delectus accusamus placeat dignissimos? Enim! Minus perferendis modi magni, aperiam ratione at doloribus necessitatibus! Provident iure facilis sit maxime corporis, suscipit aspernatur expedita aperiam ea iusto maiores soluta, neque nesciunt voluptates? Praesentium repellat qui corporis. Unde exercitationem odio ullam incidunt veritatis similique nesciunt, inventore voluptas reiciendis. Velit, doloribus sequi aut harum possimus soluta quibusdam modi beatae quam minima provident, et perferendis sunt nemo. Pariatur, nesciunt. Unde exercitationem odio ullam incidunt veritatis similique nesciunt, inventore voluptas reiciendis. Velit, doloribus sequi aut harum possimus soluta quibusdam modi beatae quam minima provident, et perferendis sunt nemo. Pariatur, nesciunt.

              
              
<div class="drawer">
  <div class="drawer__list">
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/home.svg" alt="home">
      Home
    </a>
    <a href="#" class="drawer__item drawer__item--active">
      <img class="icon-md icon-primary drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/grip-horizontal.svg" alt="my-courses">
      My Courses
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/shopping-cart.svg" alt="my-cart">
      My Cart
    </a>
  </div>
  <div class="drawer__list">
    <p class="list__subheading">LIBRARY</p>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/envelope.svg" alt="messages">
      Messages
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/users.svg" alt="community">
      Community
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg" alt="albums">
      Albums
    </a>
  </div>
  <div class="drawer__list">
    <p class="list__subheading">DASHBOARD</p>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/html5.svg" alt="html">
      HTML5
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/css3.svg" alt="css">
      CSS3
    </a>
  <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/js.svg" alt="js">
      JavaScript
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/react.svg" alt="react">
      React
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/node-js.svg" alt="node"> 
      Node
    </a>
  </div>
  <div class="drawer__list">
    <p class="list__subheading">My Account</p>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/user.svg" alt="profile">
      Profile
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/lock.svg" alt="security">
      Security
    </a>
    <a href="#" class="drawer__item">
      <img class="icon-md drawer__item--icon" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/cog.svg" alt="settings">
      Settings
    </a>
  </div>
  </div>

Large Icon Drawer

To use the Large Icon Drawer component copy the below mentioned code and paste it in your drawer's container. Make sure to give a width to your container. We've made our drawer flexible and it takes 100% width of the container.