Breadcrumb navigation provides users with hierarchical links that aid in navigating and understanding the structure of a website or application. It appears as a trail of links at the top of a page, showing the path from the homepage to the current page or content. This navigation method helps users easily trace their steps back through different levels of a website, enhancing usability and reducing confusion, especially in complex or deep site structures. It also provides context and orientation, allowing users to quickly grasp where they are within the overall site hierarchy.

This is an example of a breadcrumb.

Table of Contents

• Adding a Breadcrumb
• Configuring a Breadcrumb
• Parent Breadcrumb
• Child Breadcrumb (Detailed View)
• General Instructions

Adding a Breadcrumb

1. Navigate to the top-right corner and click on Settings.
2. Once the Application Settings page loads, go to the left navigation panel and select Breadcrumbs from the Breadcrumbs dropdown menu.
3. Click on the +Add New button in the top-left corner after the list appears.
4. You are now on the Create View Page for the Breadcrumb. Proceed to the next section.

Configuring a Breadcrumb

1. Choose a descriptive name for your breadcrumb, which will be displayed at the top of your view.
2. Optionally, select an icon from the dropdown menu to go your with breadcrumb, or leave it blank for a text-only format.
3. Select the Application ID for which you are creating the breadcrumb.

Parent Breadcrumb

1. If you are creating the parent breadcrumb, leave the Breadcrumb dropdown menu blank.
2. Specify the path to the view of your object by indicating the view type and slug associated with the view name (e.g., /view-name/slug-name-for-the-view/).
3. For linking multiple breadcrumbs, repeat the above process until you reach a detail view. Refer to the next section for detailed views.

Child Breadcrumb (Detailed View)

1. Choose the parent breadcrumb from the dropdown list (assuming you have created your parent breadcrumb).
2. Ensure logical linkage between the selected breadcrumb and the current breadcrumb.
3. Provide a path that includes the detailed view of the selected object. The path format should be like /detail-view/generated-id-of-the-view/*, where * refers to the selected item’s ID.

General Instructions

1. Users can navigate back to the previous page by clicking on the parent breadcrumb, except when they are on the starting breadcrumb’s page.
2. To make the last child breadcrumb human-readable when identifying a single record in the detailed view, set the Record Label Field of the object to a specific field (e.g., name).

Thank you for following these steps to configure your SnapApp components effectively If you have any questions or need further assistance, please don’t hesitate to reach out to our support team. We’re here to help you make the most out of your SnapApp experience.

For support, email us at snapapp@bluevector.ai