Vue Tree Nav

vue-tree-nav
Animals

Current View: /home

vue-tree-nav

This is a live demo of what you can do with vue-tree-nav

If you change the state you will see a random image just as an example

There are some themes to choose below!

You can complete customize the color and scale of the vue-tree-nav in the settings form

You can customize vue-tree-nav left, right and side panel links and dropdowns

At the end of the page you see the result json of you did that you can directly use v-bind prop in vue-tree-nav

Please if you did something beautiful share with us! Send a pull request in file colorschema.json

Any suggestion, help, bug fix, feature is deeply appreciate! Hope you enjoy it!

Samples

Change color schema of the vue-tree-nav with one of our pre build themes

Settings

Customize vue-tree-nav layout

showPath:
barScale:
sideScale:
activeColor:
fontColor:
hoverColor:
bgColor:
Style:

Top Bar Left

Change links and dropdowns on the left side of vue-tree-nav

Top Bar Right

Change links and dropdowns on the right side of vue-tree-nav

Side Bar

Change links and dropdowns on the side panel of vue-tree-nav

Result Json

If you like the result you can use directly this json with v-bind prop inside the vue-tree-nav tag

{
  "activeColor": "#000000",
  "fontColor": "#666666",
  "hoverColor": "#dddddd",
  "bgColor": "#f3f3f3",
  "style": "position:fixed;width:100%;top:0;",
  "showPath": false,
  "sideScale": 1,
  "barScale": 1,
  "left": [
    {
      "label": "vue-tree-nav",
      "icon": "home",
      "href": "#/home"
    },
    {
      "label": "Animals",
      "children": [
        {
          "label": "Elephant",
          "href": "#/animals/elephant"
        },
        {
          "label": "Lion",
          "href": "#/animals/lion"
        },
        {
          "label": "Bear",
          "href": "#/animals/bear"
        },
        {
          "label": "Eagle",
          "href": "#/animals/eagle"
        },
        {
          "label": "Wolf",
          "href": "#/animals/wolf"
        },
        {
          "label": "More",
          "children": [
            {
              "label": "Tiger",
              "href": "#/animals/tiger"
            },
            {
              "label": "Shark",
              "href": "#/animals/shark"
            },
            {
              "label": "Even More",
              "children": [
                {
                  "label": "Monkey",
                  "href": "#/animals/monkey"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "right": [
    {
      "href": "https://github.com/marcodpt/vue-tree-nav",
      "icon": "brands/github"
    }
  ],
  "side": [
    {
      "label": "vue-tree-nav",
      "icon": "home",
      "href": "#/home"
    },
    {
      "label": "Animals",
      "children": [
        {
          "label": "Elephant",
          "href": "#/animals/elephant"
        },
        {
          "label": "Lion",
          "href": "#/animals/lion"
        },
        {
          "label": "Bear",
          "href": "#/animals/bear"
        },
        {
          "label": "Eagle",
          "href": "#/animals/eagle"
        },
        {
          "label": "Wolf",
          "href": "#/animals/wolf"
        }
      ]
    },
    {
      "label": "Other",
      "children": [
        {
          "label": "Vehicles",
          "href": "",
          "children": [
            {
              "label": "Car",
              "href": "#/other/vehicles/car"
            },
            {
              "label": "Bike",
              "href": "#/other/vehicles/bike"
            },
            {
              "label": "Plane",
              "href": "#/other/vehicles/plane"
            },
            {
              "label": "Boat",
              "href": "#/other/vehicles/boat"
            }
          ]
        },
        {
          "label": "Landscape",
          "children": [
            {
              "label": "Mountain",
              "href": "#/other/landscape/mountain"
            },
            {
              "label": "Desert",
              "href": "#/other/landscape/desert"
            },
            {
              "label": "Ocean",
              "href": "#/other/landscape/ocean"
            },
            {
              "label": "Forest",
              "href": "#/other/landscape/forest"
            }
          ]
        }
      ]
    },
    {
      "icon": "brands/github",
      "label": "Fork me at GitHub",
      "href": "https://github.com/marcodpt/vue-tree-nav"
    }
  ]
}