/components-navbar

Simple navbar component for the GrapesJS editor

Primary LanguageTypeScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

GrapesJS Navbar

Simple navbar component for GrapesJS editor

GrapesJS


Summary

  • Plugin name: grapesjs-navbar
  • Blocks: navbar
  • Components:
    • navbar, navbar-container, navbar-nav-menu, navbar-nav-menu-link, navbar-burger-menu, navbar-burger-menu-line

Options

Option Description Default
id The ID used to create the block and component. navbar
label The label used for the block and the component. Navbar
block Object to extend the default block, eg. { category: 'Extra', ... }. Pass a falsy value to avoid adding the block. {}
style Custom CSS styles for the component. This will replace the default one. ''
styleAdditional Additional CSS styles for the component. These will be appended to the default one. ''
classPrefix Component class prefix. navbar

Download

  • CDN
    • https://unpkg.com/grapesjs-navbar
  • NPM
    • npm i grapesjs-navbar
  • GIT
    • git clone https://github.com/GrapesJS/components-navbar.git.git

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