Plugin Navbar

Every site needs navigation, and building one from raw components means nesting a container, a link list and a mobile toggle by hand each time. This plugin adds it as a single block.

Components

The navbar is not one opaque element — it is six addressable components, so the Layer Manager and Style Manager can reach each part: navbar, navbar-container, navbar-nav-menu, navbar-nav-menu-link, navbar-burger-menu and navbar-burger-menu-line. Links are added, removed and restyled individually, and the burger menu handles the narrow breakpoint.

Options

• id and label — the identifier and display name used for the block and component, if navbar and Navbar clash with your own naming.
• block — extend the default block definition, for example to move it into another category. Pass a falsy value to register the component without adding a block.
• style — replace the plugin's CSS entirely with your own.
• styleAdditional — append rules to the default styles instead of replacing them.
• classPrefix — change the navbar class prefix so generated class names match your design system.

Good to know

Install as grapesjs-navbar from npm or unpkg. BSD-3-Clause.