Sidebar Menu - Documentation

Configuration

Customize the sidebar menu from store/sidebarMenuConfig.js.

const home = {
  label: 'Home',
  route: 'student-home',
  icon: {
    type: 'md-icon',
    id: 'home'
  }
}

const browseCourses = {
  label: 'Browse Courses',
  route: 'student-courses',
  icon: {
    type: 'md-icon',
    id: 'local_library'
  }
}

const pages = {
  id: 'pagesMenu',
  label: 'Pages',
  children: [
    home,
    browseCourses
  ]
}

export const state = () => ({
  menu: [
    home,
    browseCourses,
    submenu
  ]
})

Component

Then use the <fmv-sidebar-menu> component to render the sidebar menu. The following example is simplified in order to cover the basic usage, however you should check the application sidebar component in vendor/vue-luma/components/Sidebar/Sidebar.vue

<template>
  <fmv-sidebar-menu :menu="sidebarMenuConfig.menu" />
</template>

<script>
  import {
    FmvSidebarMenu
  } from 'fmv-layout'

  export default {
    computed: {
      sidebarMenuConfig() {
        return this.$store.state.sidebarMenuConfig
      }
    }
  }
</script>

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset