0 0 0 0

NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Multi-step Forms » Breadcrumb Styling
Breadcrumb Styling

The multi-step breadcrumb in NEX-Forms is a visual navigation tool that helps users track their progress through a multi-step form. It displays each step as a "breadcrumb" in a sequence, showing where the user currently is and how many steps remain. This feature enhances user experience by providing a clear, structured path, helping users feel more at ease with longer forms by making each step easily navigable and visually accessible. This article will teach you how to style your multi-step form breadcrumb.

In this Article

How to Style the Multi-step Breadcrumd
  1. Edit or Create a new multi-step form.
  2. CLICK on the Multistep Settings.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Entries - Figure - 1
  3. Click on on the "BREADCRUMB" Tab from the Multi-step Settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Entries - Figure - 1
  4. This will give you the breadcrumb settings and styling options
Breadcrumb Styling Options
In this article section you will learn how to use the breadcrumb styling options. The table below shows all Breadcrumb styling settings, what their functions with visual examples.
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Overall Style and Color
In this section we will go trought each of the oveall styling and color settings with VISUAL EXAMPLES.
Breadcrumb Style
The breadcrumb Style Sets the style of breadcrumb to solid or bordered. NOTE: this excludes the progress bar breadcrumb type
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Breadcrumd Style Example
Solid
  • 1
  • 2
  • 3
Bordered
  • 1
  • 2
  • 3
Breadcrumb Type
The breadcrumb Type Sets the type of breadcrumb design.
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Breadcrumd Type Examples (Using the Light Blue Color Scheme)
  Solid Style Bordered Style
Pilled
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Arrowed
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Tiled
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Rounded
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Slanted - Forward
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Slanted - Backward
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Progress Bar
33%
Breadcrumb Color Scheme
The breadcrumb Color Scheme sets the color scheme of the breadcrumb to any of the Google Material Design Color Pallet.
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Breadcrumd Color Examples (using Pilled Type Breadcrumbs)
  Solid Style Bordered Style
Light Green
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Green
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Lime
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Teal
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Gray
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Blue Gray
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Cyan
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Light Blue
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Blue
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Pink
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Purple
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Deep Purple
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Indigo
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Amber
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Orange
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Red
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Brown
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
Breadcrumb Gutter / Spacing
The breadcrumb Gutter sets space between the breadcrumb items in a reange from -30px to 30px. NOTE: this excludes the progress bar breadcrumb type
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Gutter Width Example (Using Type - Arrowed. Using Color Scheme - Blue Gray)
-20px
  • 1
  • 2
  • 3
  • 4
-10px
  • 1
  • 2
  • 3
  • 4
0px
  • 1
  • 2
  • 3
  • 4
10px
  • 1
  • 2
  • 3
  • 4
20px (default)
  • 1
  • 2
  • 3
  • 4
30px
  • 1
  • 2
  • 3
  • 4
Folded Crumb Items
This setting gives your the option to have folded or unfolded crumb items when using Titles and Descriptions in your multi-step forms.
If set to folded only the current step title will be visible and the rest will be folded.
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Setting Examples (Using Type - Tiled. Using Color Scheme - Deep Purple)
Unfolded

NEX-Forms - Grid Replication - 2		 Example of a Mutli-step Form with an UNFOLDED breadcrumb. Complete a few steps in this form below and see how the breadcrumb behaves.

Personal Information
Folded

NEX-Forms - Grid Replication - 2		 Example of a Mutli-step Form with an FOLDED breadcrumb. Complete a few steps in this form below and see how the breadcrumb behaves.

Personal Information
Connected Items
This setting gives your the option to have crumb items connected or unconnected.
NEX-Forms - Figure Arrow
NEX-Forms - Managing Entries - Figure - 1
Setting Examples (Using Type - Rounded. Using Color Scheme - Cyan)
Connected

NEX-Forms - Grid Replication - 2
Unconnected

NEX-Forms - Grid Replication - 2
Was this article helpful?
Yes
No
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article