Special Components
Webflow has a set of native components with complex internal structures that differ from standard HTML elements. Convertex detects these components automatically and generates the correct Webflow-native JSON structure for each one.
How Component Detection Works
Convertex identifies special components by looking for Webflow-specific CSS class prefixes in your HTML. When an element (or its children) has one of these class names, Convertex switches from standard tag mapping to a component-specific conversion path:
| Class Prefix | Component | Webflow Type |
|---|---|---|
w-nav | Navbar | NavbarWrapper |
w-dropdown | Dropdown | DropdownWrapper |
w-form | Forms | FormWrapper |
w-slider | Slider | SliderWrapper |
w-tabs | Tabs | TabsWrapper |
w-lightbox | Lightbox | LightboxWrapper |
| (background video structure) | Background Video | BackgroundVideoWrapper |
You do not need to memorize the exact Webflow class names. Each component page below shows the required HTML structure with the correct classes. Simply use those structures as templates.
The Seven Components
1. Navbar
A responsive navigation bar with logo, menu links, and a mobile hamburger toggle. Webflow navbars include built-in responsive behavior -- the menu collapses into a hamburger on tablet and mobile breakpoints.
Use when: You need a site-wide navigation header with mobile-responsive menu behavior.
View full Navbar documentation
2. Dropdown
A toggle-based dropdown menu, commonly used inside navbars for sub-navigation. The dropdown includes a toggle button and a list of links that appear on click.
Use when: You need a menu that opens/closes on click within a navbar or standalone.
View full Dropdown documentation
3. Forms
A complete form block with text inputs, textareas, select menus, checkboxes, radio buttons, and submit buttons. Webflow forms include built-in states for form success and error messages.
Use when: You need any kind of user input form -- contact forms, sign-up forms, search bars, etc.
4. Slider
An image or content slider with navigation arrows and indicator dots. Webflow sliders support multiple slides with automatic or manual navigation.
Use when: You need a carousel, testimonial slider, or any content that scrolls horizontally through slides.
View full Slider documentation
5. Tabs
A tabbed content interface with a tab menu and corresponding content panes. Clicking a tab shows its associated content while hiding the others.
Use when: You need to organize content into switchable panels -- feature comparisons, pricing tiers, categorized information.
6. Lightbox
A media lightbox that opens a full-screen overlay when triggered. Supports images and videos with optional captions.
Use when: You need a click-to-expand media viewer for images or video.
View full Lightbox documentation
7. Background Video
A video that plays in the background of a section or container, with a fallback image for unsupported browsers or slow connections.
Use when: You want a video playing behind other content, like a hero section with a video background.
View full Background Video documentation
Components vs Regular HTML
You should use these component structures only when you need Webflow's built-in interactive behavior. Here is a quick decision guide:
| Need | Use Component? | Reason |
|---|---|---|
| Responsive navbar with hamburger menu | Yes -- Navbar | Webflow's navbar handles the responsive collapse natively |
| Simple horizontal list of links | No -- regular HTML | Standard <ul> with flex layout is simpler |
| Click-to-open dropdown sub-menu | Yes -- Dropdown | Webflow handles the open/close toggle natively |
Styled <select> element | No -- regular HTML | Use a standard form select |
| Contact form with validation | Yes -- Forms | Webflow forms include built-in submission and validation |
| Image carousel with arrows | Yes -- Slider | Webflow slider handles slide transitions natively |
| Tabbed content panels | Yes -- Tabs | Webflow tabs handle the show/hide logic natively |
| Click-to-zoom image | Yes -- Lightbox | Webflow lightbox handles the overlay natively |
| Hero section with video background | Yes -- Background Video | Webflow handles video playback and fallback natively |
If you use a Webflow component class prefix (like w-nav or w-slider) but do not provide the correct internal structure, the conversion may produce incomplete results. Always follow the required HTML structure documented on each component page.