| Statements | Branches | Functions | Lines |
|---|---|---|---|
 |
|
|
|
You can see an example here
- Clone this project.
cdto the repository folder.- Type
npm i - If you want to develop, type
npm start. If you want to use, typenpm buildand get the files in dist folder. - Have fun 😉
First, build the project, get the files in dist folder and then include this files in your project:
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">Now, you need insert this tag in the place you want to insert the navbar:
<navbar-vanilla />We can build our navbar:
const navbar = new Navbar(navbarParameters);| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| backgroundColor | String | No | Hex color code | Background color of the navbar |
| color | String | No | Hex color code | Color of the text elements of the navbar |
| hoverColor | String | No | Hex color code | Color of the navbar elements on hover (except logos) |
| customClass | String | Yes | Any | Custom class with your custom styles |
| customMobileResolution | Number | Yes | Any | Custom resolution to show mobile elements |
| customElementShadowRoot | String | Yes | Any | If your "vanilla-navbar" tag is inside of any ShadowRoot, set the custom element here |
| navbarId | String | Yes | Any | Id of the navbar |
| logos | Array | Yes | Array of Logo | Array of a logos obejcts |
| itens | Array | Yes | Array of Item | Array of a itens obejcts |
| dropDowns | Array | Yes | Array of DropDown | Array of a drop downs obejcts |
| avatars | Array | Yes | Array of Avatar | Array of a drop downs obejcts |
| customElements | Array | Yes | Array of CustomElement | Array of a customElements obejcts |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| src | String | No | Any | URL to the logo image |
| clickEvent | String | Yes | Any | Event broadcast on click |
| href | String | Yes | Any | URL to redirect on click |
| position | String | No | "left", "center" or "right" | Logo alignment in navbar |
| hideOnDevice | String | Yes | "desktop" or "mobile" | Hide logo in specific device |
| customClass | String | Yes | Any | Custom class to the logo |
| idElement | String | Yes | Any | Id to the logo |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| text | String | No | Any | Text to the item |
| clickEvent | String | Yes | Any | Event broadcast on click |
| href | String | Yes | Any | URL to redirect on click |
| position | String | No | "left", "center" or "right" | Item alignment in navbar |
| hideOnDevice | String | Yes | "desktop" or "mobile" | Hide item in specific device |
| customClass | String | Yes | Any | Custom class to the item |
| idElement | String | Yes | Any | Id to the item |
| forceNavbarTop | Boolean | Yes | true or false | Force or not the item in Navbar in low resolutions |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| text | String | No | Any | Text to the item |
| clickEvent | String | Yes | Any | Event broadcast on click |
| position | String | No | "left", "center" or "right" | Item alignment in navbar |
| hideOnDevice | String | Yes | "desktop" or "mobile" | Hide item in specific device |
| customClass | String | Yes | Any | Custom class to the item |
| idElement | String | Yes | Any | Id to the item |
| forceNavbarTop | Boolean | Yes | true or false | Force or not the item in Navbar in low resolutions |
| columns | Array | No | Array of Column | Array of a columns objects |
| classesToPreventCloseOnClick | Array | Yes | Array of String | Array of classes to prevent close on click if dropdown is oppened |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| src | String | No | Any | URL to the avatar image |
| clickEvent | String | Yes | Any | Event broadcast on click |
| position | String | No | "left", "center" or "right" | Item alignment in navbar |
| hideOnDevice | String | Yes | "desktop" or "mobile" | Hide item in specific device |
| customClass | String | Yes | Any | Custom class to the item |
| idElement | String | Yes | Any | Id to the item |
| forceNavbarTop | Boolean | Yes | true or false | Force or not the item in Navbar in low resolutions |
| columns | Array | Yes | Array of Column | Array of a columns objects |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| html | String | No | Any | Html of the custom element |
| clickEvent | String | Yes | Any | Event broadcast on click |
| position | String | No | "left", "center" or "right" | Custom element alignment in navbar |
| hideOnDevice | String | Yes | "desktop" or "mobile" | Hide custom element in specific device |
| customClass | String | Yes | Any | Custom class to the item |
| idElement | String | Yes | Any | Id to the item |
| forceNavbarTop | Boolean | Yes | true or false | Force or not the item in Navbar in low resolutions |
| columns | Array | Yes | Array of Column | Array of a columns objects |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| contentBoxes | Array | Yes | Array of ContentBox | Array of a Dropdown Items objects |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| *text | String | No | Any | Text to the item |
| **items | Array | Yes | Array of Dropdown Items | Array of a columns objects |
| **customItems | Array | Yes | Array of Dropdown Custom Items | Array of a Dropdown Custom Items objects |
| *Only used if "items" is filled |
**Only one is accepted (items OR customItems)
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| text | String | No | Any | Text to the dropdown item |
| idElement | String | Yes | Any | Id to the item |
| href | String | Yes | Any | URL to redirect on click |
| Parameter | Type | Optional | Possible values | Description |
|---|---|---|---|---|
| idElement | String | Yes | Any | Id to the custom item |
| html | String | No | Any | Html of the dropdown custom item |
const navbarParameters = {
backgroundColor: '#6a1b9a',
hoverColor: '#54157b;',
color: '#fffff',
customClass: 'aaa',
logos: [
{
src: 'path-to-your-logo.jpg,
href: '/home',
position: 'left',
hideOnDevice: '',
customClass: 'custom',
clickEvent: 'test'
},
],
items: [
{
text: 'Home',
href: '/',
position: 'center',
customClass: 'custom'
},
{
text: 'About',
href: '/about',
position: 'center'
},
],
dropDowns: [
{
position: 'center',
text: 'Dropdown',
clickEvent: '',
customClass: 'center',
hideOnDevice: 'mobile',
columns: [
{
contentBoxes: [
{
customItems: [
{
html: `<div class="custom-drop-down-item-example">
<div class="custom-drop-down-item-first-text custom-drop-down-item-text">
<h4>Hello, <b>WORLD</b>!</h4>
</div>
<div class="center">
<button class="custom-class-for-a-custom-element"
onclick="window.open('https://github.com/')"
target="_blank">
OPEN GITHUB
</button>
</div>
</div>`
}
],
},
]
},
]
},
{
position: 'center',
text: 'Dropdown 1',
idElement: 'id-dropdown1',
clickEvent: '',
customClass: '',
hideOnDevice: '',
columns: [
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2',
idElement: 'id-item1-dropdown1',
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
],
},
]
}
],
avatars: [
{
position: 'right',
src: 'path-to-your-avatar.jpg',
clickEvent: '',
customClass: '',
hideOnDevice: '',
columns: [
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
]
},
{
position: '',
src: 'path-to-your-avatar.jpg',
clickEvent: '',
customClass: '',
hideOnDevice: 'desktop',
columns: [
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
},
{
text: 'Option 5',
href: '/about2'
}
]
},
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
]
}
],
customElements: [
{
html: '<button type="button">Dropdown</button>',
customClass: 'custom-class-for-a-custom-element',
position: 'right',
clickEvent: 'abcd',
columns: [
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
{
contentBoxes: [
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
},
{
text: 'Option 5',
href: '/about2'
}
]
},
{
text: 'Header 2',
items: [
{
text: 'Option 3',
href: '/home2'
},
{
text: 'Option 4',
href: '/about2'
}
]
},
]
},
]
},
{
html: '<button type="button">Custom</button>',
customClass: 'custom-class-for-a-custom-element',
position: 'right',
clickEvent: 'abcd',
}
]
};
Pull requests are welcome! But for major changes, please open an issue first to discuss what you would like to change.