# Create custom navigation bar from json file on uibuilder

**URL:** <https://discourse.nodered.org/t/create-custom-navigation-bar-from-json-file-on-uibuilder/17595>\
**Category:** General\
**Created:** [6 November 2019 14:53 UTC](https://discourse.nodered.org/t/create-custom-navigation-bar-from-json-file-on-uibuilder/17595 "2019-11-06T14:53:43Z")\
**Posts on this page:** 1\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 November 2019 10:50 UTC](https://discourse.nodered.org/t/create-custom-navigation-bar-from-json-file-on-uibuilder/17595/21 "2019-11-19T10:50:26Z")

</div>

I do feel that you are trying to run before you can walk here.

Please go and work through some VueJS examples so that you understand the basics of how it works.

You assign data to a prop by referencing it when you include the component in your app's html. The leading `:` tells Vue that you are passing a data variable rather than static text. so `:rooms="rooms"` says that your app1.data.rooms variable is being assigned to your components prop variable also called rooms. Let's prefix them which might be clearer. We will call the app data variable `dRooms` and the prop `pRooms`: `:pRooms="dRooms"`.

[Previous page](https://discourse.nodered.org/t/create-custom-navigation-bar-from-json-file-on-uibuilder/17595.md?page=1)