Mynav NPM | npm.io

1. What is myNav?

The library mynav provides the possibility to create a complete vertical navbar (menu) with a one object. From the individual entries of the menu, a corresponding function is called directly after clicking.

see example below:

Bild1 Picture 1: For Example

2. Installation Guide

If you just want to take a look at the library mynav, go straight to the point 2.1.1

First install nodejs
Create a package.json file in your working directory! npm init -y or npm init
Install the package mynav npm i mynav

2.1 integrate

There are several ways to include mynav in your code.

2.1.1 For testing purposes, without performing the installation listed in Chapter 2

Create an HTML file index.html and write the following lines in the head tag:

...
<head>
    <script src="https://cdn.jsdelivr.net/npm/mynav@1.0.18/mynav.js"></script>
</head>
...

Include the tag mynav (<mynav> </ mynav>) in the body-tag and create a script with the following content, which you can insert below in body-tag or enter in a separate script:

...
<body>
    <mynav></mynav>
    <script>
	new MyNavEntryPoint.MyNavBar()
    </script>
</body> 
...

Start your website! If you did everything right, it should look like this: Bild2 Picture 2: example jsfiddle.net github

2.1.2 Local Installation

Perform the installation as in 2. Installation Guide described. Create an HTML file index.html and write the following lines in the head tag:

...
<head>
  ... 
  <script  src="node_modules/mynav/mynav.js"></script>
  ...
</head>   
...

Include the tag mynav (<mynav></ mynav>) in the body-tag and create a script with the following content, which you can insert below in body-tag or enter in a separate script:

...
<body>
    <mynav></mynav>
    <script>
	    const mynav = new MyNavEntryPoint.MyNavBar();
    </script>
</body> 
...

Start your website! If you did everything right, it should look like Picture 2. Examplel github

2.1.3 Webpack 4 installation

Please visit the following link gitub

3. Configuration

When calling the constructor function, you can pass an object as an argument and thus initialize the entire navigation. In the program flow, each individual property (for example, background, font family, menu items, etc.) can be changed later. If you pass the constructor function no Object argument, the following default object works:

{  
     items: 
     [  
        [  
            { item: 'Item 1'},  
            { item: 'Item 1 1', func: () => {console.log('Item 1 1')}},  
            { item: '--'},  
            { item: 'Item 1 2', func: () => {console.log('Item 1 2')}}  
        ],  
        { item: 'Item 2', func: () => {console.log('Item 2')}}  
    ],  
    trigger: 'click',  
    popupWidth:'150px',  
    fontFamily: 'monospace, sans-serif',  
    fontSize: '18px',  
    position: 'absolute',  
    top: '0',  
    offsetXpx: '0',  
    offsetYpx: '0',  
    navWidth: '90%',  
    navHeight: '50px',  
    color: 'white',  
    background: 'black',  
    colorHover:'white',
    backgroundHover: 'gray', 
    colorActive: 'white', 
    backgroundActive: 'blue',  
    colorDisabled: 'gray',
    backgroundDisabled: 'black',
    borderColor: 'gray', 
    border: true, 
    logoImage: '',  
    logoText: '<div style="font-weight: bold; font-size: x-large">LOGO</div>',  
    buttonText: 'login',  
    buttonVisible: true,  
    buttonFunction: () => {console.log('button pressed') },  
    searchButtonText: 'search',  
    searchButtonFunction: (inputValue) => {console.log('This is my text:', inputValue) },  
    searchVisible: true 
}

3.1 Items

All navigation and control is described in the property items of the object.
The property items consists of an array, which consists of objects or other arrays (submenus). The topmost array describes the top horizontal menu structure. Here, each entry consists of an object, which is a string property item (menu identifier) and functions property func, which is executed when the menu identifier is clicked.

Example: items

const HomeFunc = function(){window.open( 'https://www.w3schools.com','_blank')}
const ContactFunc = ()=>{document.body.style='margin: 0; background-color: green';                
			 document.getElementById('myID').textContent='Home in Berlin'}             
const MENU = 
{
   items: 
   [ 
    {item: 'w3School', func: HomeFunc},
    {item: 'About', func: ()=>document.getElementById('myID').textContent = 'Exapmle for Item'},
    {item: 'kontakt', func: ContactFunc}
   ]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);

Bild3 Picture 3 Example

3.2 Submenues

If a submenu is to be embedded in one place, then another Array is inserted here instead of an object with the property types item and func. Here, the first entry of the Array is the entry point of the submenu and is located in the parent of the submenu. In the first entry, the func property is ignored because this entry represents only the entry point of the submenu. Example: submenues

...
const MENU = {
   items: 
   [
	   {item: 'w3School', func: HomeFunc},
           {item: 'About', func: ()=>h1.textContent = 'Exapmle for Item'},
           [	{item: 'Contact'},  
	           {item:'kontakt Dresden', func:()=>h1.textContent='Büro Dresden'},
	           [    {item:'Contact Berlin' },
	                   {item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
	                   {item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
	                   {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
	            ]
           ]     
    ]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
...

Bild 4 Picture 4 submenues

3.3 Further properties of the property Items

3.3.1 Separator

By assigning a string '--' {item: '--'} a separator is inserted at this point. Example: Seperator

...
[	{item:'Contact Berlin' },
        {item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
        {item: '--'},
        {item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
        {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
...

Bild 5 Picture 5 Seperator

3.3.2 disabled

If an entry of the menu should not respond. For example, if you expand a submenu or execute the assigned func function, the true property can be assigned to the disabled property. Example: disabled

...
 [	   {item: 'w3School', func: HomeFunc},
           {item: 'About', disabled: true, func: ()=>h1.textContent = 'Exapmle for Item'},
           [	{item: 'Contact'},  
           	{item:'Contakt Dresden', func:()=>h1.textContent='Büro Dresden'},
              [	{item:'Contact Berlin' },
              	{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
                {item: '--'},
                {item:'Treptow', disabled: true,  func:()=>h1.textContent='Office Berlin Treptow' },
                {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
              ]
           ]     
 ]
 ...

Bild6 Picture 6 disabled

3.4 Assign and change the configuration in the program run

As in paragraph 3. Configuration mentioned, you can also after calling the constructor methodconst mynav = new MyNavEntryPoint.MyNavBar(MENU); bzw. (webpack)

import { MyNavBar } from 'mynav';
const mynav = new MyNavBar();

all Property's changed. To do this, simply access the new constructor-method initialized variable (in the example mynav) and change the named property. Example: changes after initialization

...
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
//Changes after initialization
//eaxample for singlechanges
navbar.background = 'magenta';
const items = navbar.items;
items[1].item = 'About news';
items[1].func=()=>{h1.textContent='About news'};
items[1].disabled = false;
navbar.items = items;
//example for multichanges
navbar.myNavObj={
  color: 'lightblue',
  backgroundHover: 'darkblue',
  searchVisible: false,
  buttonVisible: false,
  logoText: '<h1 style="background:#000; color: blue; padding: 0 5px">myLogo</h1>'
  };

Bild8 Picture 8 changes after initialization

4 Properties at a glance

Scroll to the right to see the example button.

name	default	Values / Unit	Description	Example	jsfiddle
*items:* {item: textValue\|array, func: function, disabled: true\|false }		array	see section 3.1
*trigger:*	'click'	'click'	call submenu by clicking	trigger: 'click'
		'hover'	call submenu by hovering	trigger: 'hover'	Example
*popupWidth:*	'150px'	px	minimum width of dropdown menus (submenus)	popupWidth: '300px'	Example
*fontFamily:*	'monospace, sans-serif'	alle font-family's	font family	fontFamily:' "Times New Roman", Times, serif'	Example
*fontSize:*	'18px'	em, px, % Units CSS-font-size	font size	fontSize:'2em'	Example
*position:*	'absolute'	'absolute''fixed''sticky''relative''static'	Positional behavior as described in CSS3. Can be used in conjunction with the *top* property - except static (has no effect).	position:'sticky'position:'fixed'	Example
*top:*	'0px'	px	upper distance	top: '20px'	Example
*offsetXpx:*	'0px'	px	left relative distance of the dropdown menu	offsetXpx:'-20px'	Example
*offsetYpx:*	'0px'	px	upper relative distance of the dropdown menu	offsetXpx:'10px'	Example
*navWidth:*	'90%'	px, %	Centered width of the displayed elements of the horizontal NavBar	navWidth: 700pxnavWidth: 80%	Example
*navHeight:*	'50px'	px	Height of the menu items	navHeight: '40px'	Example
*color:*	'white'	color	font Color	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*background:*	'black'	color	background color	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*colorHover:*	'white'	color	Font color at hover	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*backgroundHover:*	'darkgray'	color	Background color at hover	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*colorActive:*	'white'	color	Font color Active	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*backgroundActive:*	'blue'	color	Background color Active	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*colorDisabled:*	'gray'	color	Font color in Disabled	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*backgroundDisabled:*	'black'	color	Background color for Disabled	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*borderColor:*	'white'	color	Frame/Seperator color	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Example
*border:*	true	boolean	Frame visible	border: false	Example
*logoImage:*	' '	string	Source path and name of the image file (png, jpg ... etc.) If a value is specified here, logoText is ignored!	logoImage: '/img/picture.png'	Example
*logoText:*	'\LOGO\'	string/innerHTML	Ignored when *logoImage* is specified!	logoText: \myLogo\	Example
*buttonText:*	'login'	string	label button	buttonText: 'logout'	Example
*buttonVisible:*	True	boolean	visiblity button	buttonVisible: false	Example
*buttonFunction:*	() => {console.log('button pressed') }	function	Function that is executed by clicking.	buttonFunction: myFunction	Example
*searchButtonText:*	'search'	string	label button	searchButtonText: 'find'	Example
*searchVisible:*	True	string	Visibility Input & Button	searchVisible: false	Example
*searchButtonFunction:*	(inputValue) => {console.log('This is my text:', inputValue) }	function	Function that is executed by clicking. In *InputValue* is the search string	searchButtonFunction: mySearchFunction	Example
*myNavObj:*	aktuelles myNav-Object	myNav-Object	To easily change multiple properties	myNav.myNavObj={color: 'blue', background:'#fff'}	Example

Deutsch

1. Was ist myNav?

Die Bibliothek mynav stellt die Möglichkeit bereit, mit einem einzigen Objekt eine komplette vertikale Navbar (Menue) zu erstellen. Aus den einzelnen Einträgen des Menues wird nach dem anklicken direkt eine dazugehörige Funktion aufgerufen.

siehe folgendes Beispiel:

Bild1 Bild 1: Hier gehts zum Beispiel:

2. Installation

Falls Sie nur kurz reinschauen wollen um die Bibliothek mynav zu testen, gehen Sie gleich zu Punkt 2.1.1

Installieren Sie zuerst nodejs
Erstellen Sie eine Datei package.json in ihrem Arbeitsverzeichnis! npm init -y oder npm init
Installieren Sie das package mynav npm i mynav

2.1 Einbinden

Es gibt mehrere möglichkeiten mynav in Ihren Code einzubinden.

2.1.1 Zu Testzwecken, ohne die in Punkt 2 aufgeführte Installation durchzuführen

Erstellen Sie eine HTML-Datei index.html und geben in den head-Tag folgende Zeilen ein:

...
<head>
    <script src="https://cdn.jsdelivr.net/npm/mynav@1.0.18/mynav.js"></script>
</head>
...

binden Sie in den body-tag den Tag mynav (<mynav></mynav>) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im body-tag einfügen oder in einem eigenem Script erfassen:

...
<body>
    <mynav></mynav>
    <script>
	new MyNavEntryPoint.MyNavBar()
    </script>
</body> 
...

Starten Sie ihre Webseite! Wenn Sie alles richtig gemacht haben, sollte es so aussehen: Bild2 Bild 2: Beispiel jsfiddle.net github

2.1.2 Lokale Installation

Führen sie die Installtion, wie in Punkt 2. Installation beschrieben durch. Erstellen Sie eine HTML-Datei index.html und geben in den head-Tag folgende Zeilen ein:

...
<head>
  ... 
  <script  src="node_modules/mynav/mynav.js"></script>
  ...
</head>   
...

binden Sie in den body-tag den Tag mynav (<mynav></mynav>) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im body-tag einfügen oder in einem eigenem Script erfassen:

...
<body>
    <mynav></mynav>
    <script>
	    const mynav = new MyNavEntryPoint.MyNavBar();
    </script>
</body> 
...

Starten Sie ihre Webseite! Wenn Sie alles richtig gemacht haben, sollte es so aussehen wie auf Bild 2. Beispiel github

2.1.3 Webpack 4 Installation

Besuchen Sie hierzu folgenden Link gitub

3. Konfiguration

Sie können beim Aufruf der Konstruktor-Funktion ein Objekt als Argument übergeben und damit die gesammte Navigation initialisieren. Im Programmablauf, kann jede einzelne Eigenschaft (z.B. Background, Font-Family, Menue-Items etc.) später geändert werden. Wenn Sie der Konstruktorfunktion kein Objekt-Argument übergeben, wirkt das folgende Default-Object:

{  
     items: 
     [  
        [  
            { item: 'Item 1'},  
            { item: 'Item 1 1', func: () => {console.log('Item 1 1')}},  
            { item: '--'},  
            { item: 'Item 1 2', func: () => {console.log('Item 1 2')}}  
        ],  
        { item: 'Item 2', func: () => {console.log('Item 2')}}  
    ],  
    trigger: 'click',  
    popupWidth:'150px',  
    fontFamily: 'monospace, sans-serif',  
    fontSize: '18px',  
    position: 'absolute',  
    top: '0',  
    offsetXpx: '0',  
    offsetYpx: '0',  
    navWidth: '90%',  
    navHeight: '50px',  
    color: 'white',  
    background: 'black',  
    colorHover:'white',
    backgroundHover: 'gray', 
    colorActive: 'white', 
    backgroundActive: 'blue',  
    colorDisabled: 'gray',
    backgroundDisabled: 'black',
    borderColor: 'gray', 
    border: true, 
    logoImage: '',  
    logoText: '<div style="font-weight: bold; font-size: x-large">LOGO</div>',  
    buttonText: 'login',  
    buttonVisible: true,  
    buttonFunction: () => {console.log('button pressed') },  
    searchButtonText: 'search',  
    searchButtonFunction: (inputValue) => {console.log('This is my text:', inputValue) },  
    searchVisible: true 
}

3.1 items

Die gesamte Navigation und Steuerung wird in der Property items des Objektes beschrieben. Die Property items besteht aus einem Array, welches aus Objekten bzw. weiteren Arrays (Untermenue's) aufgebaut ist. Im obersten Array wird die oberste horizontale Menue-Struktur beschrieben. Hier besteht jeder Eintrag aus einem Objekt, welches eine String-Property item (Menue-Bezeichner) und Functions-Property func, welche Ausgeführt wird, wenn der Menue-Bezeichner angeklickt wurde.

Beispiel: items

const HomeFunc = function(){window.open( 'https://www.w3schools.com','_blank')}
const ContactFunc = ()=>{document.body.style='margin: 0; background-color: green';                
			 document.getElementById('myID').textContent='Home in Berlin'}             
const MENU = 
{
   items: 
   [ 
    {item: 'w3School', func: HomeFunc},
    {item: 'About', func: ()=>document.getElementById('myID').textContent = 'Exapmle for Item'},
    {item: 'kontakt', func: ContactFunc}
   ]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);

Bild3 Bild 3 Beispiel

3.2 Untermenues

Soll an einer Stelle ein Untermenue eingebettet werden, wird hier, anstatt eines Objektes mit den Propertypen item und func ein weiteres Array eingefügt. Hierbei ist der erste Eintrag des Array der Einstiegspunkt des Submenues und befindet sich im Elternteil des Submenues. Im ersten Eintrag wird die Property func nicht beachtet, da dieser Eintrag nur den EInstiegspunkt des Submenues darstellt. Beispiel: submenues

...
const MENU = {
   items: 
   [
	   {item: 'w3School', func: HomeFunc},
           {item: 'About', func: ()=>h1.textContent = 'Exapmle for Item'},
           [	{item: 'Contact'},  
	           {item:'kontakt Dresden', func:()=>h1.textContent='Büro Dresden'},
	           [    {item:'Contact Berlin' },
	                   {item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
	                   {item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
	                   {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
	            ]
           ]     
    ]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
...

Bild 4 Bild 4 submenues

3.3 Weitere Eigenschaften der Property Items

3.3.1 Seperator

Durch das zuweisen eines String ' - - ' {item: '--'} wird an dieser stelle eine Trennmarkierung (Seperator) eingefügt. Beispiel: Seperator

...
[	{item:'Contact Berlin' },
        {item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
        {item: '--'},
        {item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
        {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
...

Bild 5 Bild 5 Seperator

3.3.2 disabled

Wenn ein Eintrag des Menues keine Reaktionen ausführen soll, z. B. aufklappen eines Untermenues oder Ausführen der zugewiesenen Funktion func, kann der Eigenschaft disabled der Wert true zugewiesen werden. Beispiel: disabled

...
 [	   {item: 'w3School', func: HomeFunc},
           {item: 'About', disabled: true, func: ()=>h1.textContent = 'Exapmle for Item'},
           [	{item: 'Contact'},  
           	{item:'Contakt Dresden', func:()=>h1.textContent='Büro Dresden'},
              [	{item:'Contact Berlin' },
              	{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
                {item: '--'},
                {item:'Treptow', disabled: true,  func:()=>h1.textContent='Office Berlin Treptow' },
                {item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
              ]
           ]     
 ]
 ...

Bild6 Bild 6 disabled

3.4 Zuweisen und Ändern der Konfiguration im Programmlauf

Wie in Absatz 3. Konfiguration erwähnt, können Sie auch nach dem Aufruf der Konstruktormethodeconst mynav = new MyNavEntryPoint.MyNavBar(MENU); bzw. (webpack)

import { MyNavBar } from 'mynav';
const mynav = new MyNavBar();

alle Property's veränder. Hierzu greifen Sie einfach auf die durch new konstruktor-methode initialisierte Variable zu (im Beispiel mynav) und verändern die benannte Property. Beispiel: changes after initialization

...
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
//Changes after initialization
//eaxample for singlechanges
navbar.background = 'magenta';
const items = navbar.items;
items[1].item = 'About news';
items[1].func=()=>{h1.textContent='About news'};
items[1].disabled = false;
navbar.items = items;
//example for multichanges
navbar.myNavObj={
  color: 'lightblue',
  backgroundHover: 'darkblue',
  searchVisible: false,
  buttonVisible: false,
  logoText: '<h1 style="background:#000; color: blue; padding: 0 5px">myLogo</h1>'
  };

Bild8 Bild 8 changes after initialization

4 Eigenschaften auf einen Blick

Scrool nach rechts, um den Example-button zu sehen.

Name	Standard	Werte/Einheit	Beschreibung	Beispiel	jsfiddle
*items:* {item: textValue\|array, func: function, disabled: true\|false }		array	siehe Abschnitt 3.1
*trigger:*	'click'	'click'	Aufruf des Untermenuesdurch klicken	trigger: 'click'
		'hover'	Aufruf des Untermenues durch hovern	trigger: 'hover'	Beispiel
*popupWidth:*	'150px'	px	minimale Breite der DropDownMenues (Untermenues)	popupWidth: '300px'	Beispiel
*fontFamily:*	'monospace, sans-serif'	alle font-family's	Fontfamily	fontFamily:' "Times New Roman", Times, serif'	Beispiel
*fontSize:*	'18px'	em, px, % Einheiten für CSS-font-size	Schriftgröße	fontSize:'2em'	Beispiel
*position:*	'absolute'	'absolute''fixed''sticky''relative''static'	Positionsverhalten wie in CSS3 beschrieben. Kann im Zusammenhang mit der Eigenschaft *top* verwendet werden - außer static (hat keine Wirkung).	position:'sticky'position:'fixed'	Beispiel
*top:*	'0px'	px	oberer Abstand	top: '20px'	Beispiel
*offsetXpx:*	'0px'	px	linker relativer Abstand des DropdownMenues	offsetXpx:'-20px'	Beispiel
*offsetYpx:*	'0px'	px	oberer relativer Abstand des DropdownMenues	offsetXpx:'10px'	Beispiel
*navWidth:*	'90%'	px, %	zentrierte Breite der angezeigten Elemente/Items der horizontalen NavBar	navWidth: 700pxnavWidth: 80%	Beispiel
*navHeight:*	'50px'	px	Höhe der MenueItems	navHeight: '40px'	Beispiel
*color:*	'white'	color	Schriftfarbe	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*background:*	'black'	color	Hintergrundfarbe	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*colorHover:*	'white'	color	Schriftfarbe bei Hover	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*backgroundHover:*	'darkgray'	color	Hintergrundfarbe bei Hover	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*colorActive:*	'white'	color	Schriftfarbe bei Aktiv	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*backgroundActive:*	'blue'	color	Hintergrundfarbe bei Aktiv	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*colorDisabled:*	'gray'	color	Schriftfarbe bei Disabled	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*backgroundDisabled:*	'black'	color	Hintergrundfarbe bei Disabled	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*borderColor:*	'white'	color	Rahmen-/Seperatorfarbe	color: 'rgba(33,55,66,0.6)'color: 'red'color: '#66ffaa'	Beispiel
*border:*	true	truefalse	Rahmen sichtbar	border: false	Beispiel
*logoImage:*	' '	string	Quellpfad und Name der Bilddatei (png, jpg ... etc.) Wird hier ein Wert angegeben wird *logoText* ignoriert!	logoImage: '/img/picture.png'	Beispiel
*logoText:*	'\LOGO\'	string/innerHTML	Wird ignoriert, wenn *logoImage* angegeben wird!	logoText: \myLogo\	Beispiel
*buttonText:*	'login'	string	Textlabel Button	buttonText: 'logout'	Beispiel
*buttonVisible:*	True	string	Sichbarkeit Button	buttonVisible: false	Beispiel
*buttonFunction:*	() => {console.log('button pressed') }	function	Funktion die durch klicken ausgeführt wird.	buttonFunction: myFunction	Beispiel
*searchButtonText:*	'search'	string	Textlabel Button	searchButtonText: 'find'	Beispiel
*searchVisible:*	True	string	Sichbarkeit Input/Button	searchVisible: false	Beispiel
*searchButtonFunction:*	(inputValue) => {console.log('This is my text:', inputValue) }	function	Funktion die durch klicken ausgeführt wird. In *InputValue* befindet sich der Suchstring	searchButtonFunction: mySearchFunction	Beispiel
*myNavObj:*	aktuelles myNav-Object	myNav-Object	Zur einfachen Änderung mehrerer Eigenschaften	myNav.myNavObj={color: 'blue', background:'#fff'}	Beispiel