nav-image-comp is a Vue.js (>=3.2) that provides navigation and display of a list of submitted images. Thumbnails of the images are displayed across the top with a horizontal scroll bar appearing below if necessary. By simply hovering over a thumbnail, a large preview rendition of the image is displayed. Images can be quickly reviewed with the combination of horizontal scrolling and hovering over the thumbnails.

nav-image-comp can be installed via with the included package.json file for a local installation via the npm install command. nav-image-comp depends on the vue.js framework. A demo folder is provided that used Parcel together with its associated package.json file to bundle together nav-image-comp along with its vue.js dependency for a simple application. Further details are provided below for running the demo.


A prop in Vue.js is a custom attribute for passing information from a parent component hosting nav-image-comp instance(s) to an nav-image-comp as a child component. nav-image-comp has the following props for a parent to bind and send information to:

heading — a heading to be displayed above the thumbnail horizontal image list (string,default: null)

sources — an array of file paths to set the component’s image sources (array,default: null)

containerWidth — a number that defines the overall width dimension of the component (Number, default: 900)

cssVariables — defines the css variables for nav-image-comp (object, default: null)


The cssVariables prop is a javascript object that contains any combination of css variable names as keys and associated values. The following list are the css variable names along with their default values for a quick styling of nav-image-comp:

  navimage_comp_font_family: 'Verdana,serif',
  navimage_comp_background_color: '#222',

  navimage_comp_heading_color: 'white',
  navimage_comp_heading_font_size: '1.5rem',
  navimage_comp_heading_font_weight: 'bold',

  navimage_comp_thumbnail_selected_border: '4px solid gold'


nav-image-comp has one event that notifies the parent component of the current selected image source:

'navImageCompCurrentSource' --- returns the current selected image's source

The parent component can listen to the above event and provide a callback for further processing. Events emitted from a child component back to the parent is explained at Vue Custom Events.

The demonstration shows how the event can be incorporated.


One demonstration of nav-image-comp is provided in the folder named demo/dist-prod and can be viewed by hosting the index.htmlfile. The demo (templated in the App.vue file) sets the sources of 10 jpeg image files.

As a suggestion, install http-server locally/globally via npm then enter the command http-serverin the nav-image-comp dist-prod directory. From a browser enter the url: localhost:8080/ to view the demo.

Here is some example code for using nav-image-comp taken from the App.vue file:

    <div class='demo_container'>     
        heading="Favorite Pictures"

And the supporting data references:

  data: function() {
    return {
  methods: {
    show_current_source: function(source){
      console.log(`Current Source: ${source}`)


View Github