Breadcrumbs

Breadcrumb navigation provides users with hierarchical links that aid in navigating and understanding the structure of your application. It appears as a trail of links at the top of a page, showing the path from the home dashboard to the current view.

By implementing breadcrumbs in SnapApp, you enhance usability by allowing users to trace their steps back through complex site structures and provide immediate context for their current location.

Table of Contents

• Adding a Breadcrumb
• *
• Configuring a Breadcrumb
• Parent vs. Child Breadcrumbs
• Parent Breadcrumb Setup
• Child Breadcrumb (Detailed View) Setup
• Best Practices & General Instructions
• Navigation Behavior
• Dynamic Naming (Record Labels)

Adding a Breadcrumb

To begin creating a navigation trail for your application:

1. Navigate to the top-right corner of the SnapApp interface and click on Settings.
2. Once the Application Settings page loads, locate the left navigation panel.
3. In the left navigation panel, locate the UX section and select Breadcrumbs.
4. Click the + Add New button located in the top-left corner of the list view.
5. You will be redirected to the Create View page for the Breadcrumb.

Configuring a Breadcrumb

On the configuration screen, define the core properties of your breadcrumb:

Name: Enter a descriptive name. This text is what users will see in the navigation trail. Icon (Optional): Select an icon from the dropdown menu to display next to the text. Leave this blank for a text-only breadcrumb. Application ID: Select the specific Application for which you are building this navigation path.

Parent vs. Child Breadcrumbs

Breadcrumbs are built using a “linked list” logic. You must define which breadcrumbs sit at the top of the hierarchy and which ones nest underneath.

Parent Breadcrumb Setup

A Parent Breadcrumb is the starting point of a navigation trail (e.g., “Home” or “Project List”).

Breadcrumb Dropdown: Leave this field blank. This tells SnapApp that this is a top-level item. Path: Specify the path to the object view. Use the format of the view type and the slug associated with that view. * Example: /view-name/slug-name-for-the-view/

Child Breadcrumb (Detailed View) Setup

A Child Breadcrumb represents a deeper level in the application hierarchy (e.g., a specific “Task” inside a “Project”).

Parent Breadcrumb: Select the existing parent breadcrumb from the dropdown list. Logic: Ensure there is a logical relationship between the parent and this child (e.g., Project -> Task). Path: For detailed views of a specific record, the path must include the generated ID. Use the format: _ Format: /detail-view/generated-id-of-the-view/ _ Note: The asterisk () serves as a dynamic placeholder for the specific record’s ID.

Best Practices & General Instructions

Navigation Behavior

Back-tracing: Users can click any parent link in the trail to navigate back to that specific level. Current Page: The breadcrumb for the current page (the last item in the trail) is usually non-clickable as the user is already at that destination.

Dynamic Naming (Record Labels)

When a user is looking at a specific record (a Detailed View), you want the breadcrumb to show the record’s name (e.g., “iPhone 15”) rather than a generic ID.

Action: In the Object settings, set the Record Label Field to a specific field (like Name or Title). This ensures the last child breadcrumb is human-readable.

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