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