Customize Navigation Pane in Vue File Manager Component

18 Nov 20184 minutes to read

The navigation pane in the Vue File Manager component displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the navigationPaneTemplate property. This allows you to modify the appearance of folders based on your application’s requirements.

You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name.

<template>
    <div id="app">
        <ejs-filemanager id="file-manager" :ajaxSettings="ajaxSettings" :navigationPaneTemplate="navigationPaneTemplate">
        </ejs-filemanager>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { FileManagerComponent as EjsFilemanager, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { createApp } from 'vue';
const app = createApp();
const demoNavigationPaneTemplate = app.component('navigationPaneTemplate', {
  template: `
    <div class="e-nav-pane-node" style="display:inline-flex;align-items:center;">
      <span class="folder-name" style="margin-left:8px;"></span>
    </div>
  `,
  data() {
    return { data: {} };
  }
});
const navigationPaneTemplate = function () {
    return { template: demoNavigationPaneTemplate };
};
const ajaxSettings =
{
    url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations",
    getImageUrl: "https://physical-service.syncfusion.com/api/FileManager/GetImage",
    uploadUrl: "https://physical-service.syncfusion.com/api/FileManager/Upload",
    downloadUrl: "https://physical-service.syncfusion.com/api/FileManager/Download"
};
provide('filemanager',  [DetailsView, NavigationPane, Toolbar]);
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>
<template>
    <div id="app">
        <ejs-filemanager id="file-manager" :navigationPaneTemplate="navigationPaneTemplate" :ajaxSettings="ajaxSettings">
        </ejs-filemanager>
    </div>
</template>
<script>
import { FileManagerComponent, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { createApp } from 'vue';
const app = createApp();
const demoNavigationPaneTemplate = app.component('navigationPaneTemplate', {
  template: `
    <div class="e-nav-pane-node" style="display:inline-flex;align-items:center;">
      <span class="folder-name" style="margin-left:8px;"></span>
    </div>
  `,
  data() {
    return { data: {} };
  }
});
export default {
    name: "App",
    components: {
        "ejs-filemanager":FileManagerComponent
    },
    data () {
        return {
           ajaxSettings:
            {
                url: "https://physical-service.syncfusion.com/api/FileManager/FileOperations",
                getImageUrl: "https://physical-service.syncfusion.com/api/FileManager/GetImage",
                uploadUrl: "https://physical-service.syncfusion.com/api/FileManager/Upload",
                downloadUrl: "https://physical-service.syncfusion.com/api/FileManager/Download"
            },
            navigationPaneTemplate: function () {
                return { template: demoNavigationPaneTemplate };
            }
        };
    },
    provide: {
        filemanager: [DetailsView, NavigationPane, Toolbar]
    }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
</style>