GrapesJS Navbar
Simple navbar component for GrapesJS editor
Demo
Summary
- Plugin name:
gjs-navbar
- Components:
burger-menu
- Blocks:
h-navbar
Options
-
blocks
Which blocks to add, default:['h-navbar']
(all), -
defaultStyle
Add default style to blocks, default: 1, -
navbarClsPfx
Navbar class prefix, default: 'navbar', -
labelNavbar
Navbar label, default: 'Navbar', -
labelNavbarContainer
Navbar container label, default: 'Navbar Container', -
labelMenu
Menu label, default: 'Navbar Menu', -
labelMenuLink
Menu link label, default: 'Menu link', -
labelBurger
Burger menu label, default: 'Burger', -
labelBurgerLine
Burger line label, default: 'Burger Line', -
labelNavbarBlock
Navbar Block label, default: 'Navbar', -
labelNavbarCategory
Navbar Block Category label, default: 'Extra', -
labelHome
Home label, default: 'Home', -
labelAbout
About label, default: 'About', -
labelContact
Contact label, default: 'Contact',
Download
npm i grapesjs-navbar
Usage
<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-navbar.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
plugins: ['gjs-navbar'],
pluginsOpts: {
'gjs-navbar': {/* ...options */}
}
});
</script>
Development
Clone the repository
$ git clone https://github.com/artf/grapesjs-navbar.git
$ cd grapesjs-navbar
Install it
$ npm i
The plugin relies on GrapesJS via peerDependencies
so you have to install it manually (without adding it to package.json)
$ npm i grapesjs --no-save
Start the dev server
$ npm start
License
BSD 3-Clause