Home

Awesome

GrapesJS Navbar

Simple navbar component for GrapesJS editor

<p align="center"><img src="https://grapesjs.com/img/navbar.gif" alt="GrapesJS" align="center"/></p> <br/>

Demo

Summary

Options

OptionDescriptionDefault
idThe ID used to create the block and component.navbar
labelThe label used for the block and the component.Navbar
blockObject to extend the default block, eg. { category: 'Extra', ... }. Pass a falsy value to avoid adding the block.{}
styleCustom CSS styles for the component. This will replace the default one.''
styleAdditionalAdditional CSS styles for the component. These will be appended to the default one.''
classPrefixComponent class prefix.navbar

Download

Usage

Directly in the browser

<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: ['grapesjs-navbar'],
      pluginsOpts: {
        'grapesjs-navbar': {/* ...options */}
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-navbar';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/GrapesJS/components-navbar.git.git
$ cd grapesjs-navbar

Install it

$ npm i

Start the dev server

$ npm start

Build before the commit. This will also increase the patch level version of the package

$ npm run build

License

BSD 3-Clause