Components / Sections

Navbar

Sections navbar

Top navigation bar with logo and links.

Markup

Drops in as data-pb-block="navbar".

<section data-pb-block="navbar" class="pb-navbar" style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid #e2e8f0;">
  <span class="pb-navbar__brand" style="font-weight:700;font-size:1.25rem;">Brand</span>
  <nav class="pb-navbar__links" style="display:flex;gap:1.5rem;">
    <a href="#" style="color:#334155;text-decoration:none;">Features</a>
    <a href="#" style="color:#334155;text-decoration:none;">Pricing</a>
    <a href="#" style="color:#334155;text-decoration:none;">Contact</a>
  </nav>
  <a href="#" class="pb-navbar__cta" style="padding:0.5rem 1rem;border-radius:0.5rem;background:#4f46e5;color:#fff;text-decoration:none;">Sign up</a>
</section>

Settings

Everything a block can be configured to do:

Bind to State

Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.

On event → run a Flow

Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.

Link to a page

Navigate to another published page on click with data-pb-page="<slug>".

Styles & classes

Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="navbar" so it imports as a labelled, editable component.