Native and Custom Navbar Modes

Flowboard gives you two navbar paths: a strict native mode that targets a true Webflow navbar, and a custom mode for navs that should behave like custom-built Webflow structures.

Native mode is stricter. Custom mode is more flexible.

Flowboard Extension
Conversion Mode
Webflow Navigator
Native Navbar Output
Navbar
Container
Brand
Nav Menu
Menu Button
Custom Mode Output
Div Block .custom-nav
Div Block .nav-trigger
Div Block .nav-menu

Which mode should you use?

The two modes are intentionally different. They should not be described as the same conversion path with different labels.

True Webflow navbar

Native mode

Native mode applies a stored top-level Webflow navbar template so the result behaves like a real Webflow navbar instead of a custom nav recreation.

  • Merged into a real native navbar template from history
  • Strict mode: compatibility nav shim and pasted nav JS are disabled
  • Better fit when you want Webflow’s own navbar settings to control breakpoint behavior
Scratch-built behavior

Custom mode

Custom mode follows the same shape you would build from scratch in Webflow, with optional embed-assisted behavior when explicit custom nav markers are present.

  • Default path for flexible nav markup
  • Custom nav shim is only generated for explicit `data-nav-trigger` and `data-nav-menu` pairs
  • Useful when your menu behavior is intentionally custom rather than native Webflow navbar behavior

Navbar workflow

1

Choose a mode

Flowboard exposes navbar mode controls in both Convert and Settings, so you can keep the same mode across runs.

2

Convert the navbar

Native mode attempts a strict template merge, while Custom mode keeps the more flexible embed-assisted nav path.

3

Edit in Webflow

With native mode, mobile and tablet menu behavior stays inside Webflow’s navbar settings. With custom mode, you own the custom nav structure directly.

Native mode details

Template-backed output

Native mode depends on a copied top-level Webflow navbar template in history. If it is missing or invalid, Flowboard blocks the conversion instead of silently downgrading to custom shim behavior.

Strict fallback rules

When native mode is requested, nav shim JS and pasted nav runtime helpers are disabled. That keeps the output honest: native or fail, not half-native.

Webflow settings control the menu

Because the result is merged into a true native navbar template, mobile and tablet dropdown behavior belongs to Webflow’s native navbar settings rather than custom toggle wiring.

Custom mode details

Explicit marker support

Custom mode is the path for navs that rely on explicit `data-nav-trigger` and `data-nav-menu` markers and should behave more like a custom component you wired yourself.

No phantom JS

Nav-like markup without scripts or explicit custom markers should not get a supplemental JS embed automatically.

Embed-assisted when needed

If your custom navbar includes inline toggles or explicit marker pairs, Flowboard can preserve the behavior through the custom path instead of forcing a native navbar template.

Pick the navbar path that matches the outcome you actually want

If you want a true Webflow navbar with native settings behavior, use Native mode. If you want a custom navbar that behaves like one you built yourself, use Custom mode.