Element Plus is a Vue 3 UI library which help developers and UI designers quickly build apps and components. Most of the parts of the library coming from the Chinese contributor and has large user base.

Element Plus is a good choice when developing web and desktop apps.

It is important UI element in a admin panel, a collapsed sidebar show icons vertically and when user click expand button it will expand.

How do we create a sidebar using Vue3 and Element-Plus ?

The layout

We can create a flexible layout with el-container, and a sidebar sung el-menu. A two column container can be use for the content area.

For simplicity unnecessary part of the components were omitted

 <template>      <el-container   :style="{ height: '500px', border: '1px solid #eee'}">    <el-menu        default-active="2"        background-color="#545c64"        text-color="#fff"        class="el-menu-vertical-demo"        :collapse="isCollapse"             >          <el-icon :size="20"> <burger  /> </el-icon>        </el-menu-item>        <el-menu-item index="2">          <el-icon><icon-menu /></el-icon>          <template #title>Navigator Two</template>        </el-menu-item>        <el-menu-item index="3">          <el-icon><document /></el-icon>          <template #title>Navigator Three</template>        </el-menu-item>        <el-menu-item index="4">          <el-icon><setting /></el-icon>          <template #title>Navigator Four</template>        </el-menu-item>      </el-menu>            <el-container>              <el-header>          <el-icon><Menu /></el-icon>        </el-header>                <el-main>                  <el-row>            <el-col :span="12">              <h5>Col1</h5>            </el-col>            <el-col :span="12">              <h5>Col2</h5>            </el-col>          </el-row>        </el-main>        <el-footer></el-footer>      </el-container>    </el-container>  </template>

Collapse switch

We added collapse menu item for handling the action. A reactive Vue 3 property can be used for this. In the event handling we altering the value using the ternary operator syntax.

 <template> ... <el-menu-item index="2"> <el-icon :size="20"><burger @click="isCollapse == true  ?isCollapse= false :isCollapse= true" /></el-icon>       </el-menu-item> </template> <script> import { defineComponent, ref } from "vue";   export default defineComponent({   name:'Home',   components: {    ....   },   setup() {     const isCollapse = ref(true);         return {       isCollapse,             };   }, }); </script>
This free site is ad-supported. Learn more
​