Home   >   Design • Getting Started with vFlow • Inventory • System Components • vFlow 2.0 • vFlow Level 1 Menu Options   >   Breadcrumb

Breadcrumb

Introduction to Breadcrumb

A breadcrumb is a navigational aid that helps users understand and keep track of their location within a website or application. It typically appears as a horizontal list of names of the page, showing the hierarchical path from the homepage to the current page using different separator, such as (>, >>, ->, \, !>). Please click here to learn how to make Breadcrumb.

Creating a Breadcrumb

  1. Under Inventory (), click “System Component“, which is on the second left panel.
  1. Click Create placed on the second horizonal panel from the top, a dialog box “Create System Component” pops up.
  1. In the dialog box, type the Name of the system component. and Select “Breadcrumb“.
  1. When you click Create (), Basic option of Config menu for the Breadcrumb opens.
  2. Now, you will see two options under the config menu:
    1. Basic
    2. Properties
Basic
Basic PropertiesDescription
System Component TypeThe System Component Type indicates the type of system component you are adding. In this case, it defaults to “Breadcrumb” and cannot be changed here. This selection is made initially in the “Create System Component” dialog box when you first set up the component.
Reference NameThe Reference Name is a unique identifier assigned to the system component for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the system component throughout.
DescriptionThe Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the system component. This description is not visible to end-users and is used solely for internal reference to assist with component management.
Properties
PropertiesDescription
Display on MobileTo enable the the breadcrumb display for mobile devices, click on the checkbox to select it.
Display on TabletTo enable the the breadcrumb display for Tablet devices, click on the checkbox to select it.
Display Home as ICONTo configure the display of the Home link, showing it as an icon instead of text for a more visual-friendly experience, click on the checkbox to select it.
SeparatorYou can Customize the separator between breadcrumb levels, such as using the “>, >>, ->, \, !>” symbol.
Event TypeYou can make breadcrumbs clickable by defining an event on them, allowing users to navigate back through previous sections with ease.
Was this article helpful?
YesNo