Breadcrumbs are a navigational tool that displays a trail of links, helping users understand their location within a website or application hierarchy. Typically shown at the top of a page, breadcrumbs reveal the path from the homepage to the current page, allowing users to backtrack and providing context within complex structures. They enhance usability by making navigation intuitive and offering a clear sense of structure, especially in websites or applications with deep content layers.

For example, a breadcrumb path like Home > Products > Electronics > Mobile Phones > iPhone allows users to see their navigation trail. In SnapApp, breadcrumbs are customizable and can be configured to suit various applications.

Parent and Child Breadcrumb

• Parent Breadcrumb: Create a high-level breadcrumb (e.g., “Home”) by leaving the parent breadcrumb field blank. Define the path in the format /view-name/slug-name.
• Child Breadcrumb: Select the parent breadcrumb to link child pages. For example, for a product detail page, select the “Products” parent breadcrumb. For root breadcrumbs, we should emphasize turning visibility off for UI purposes.

Example: If setting up breadcrumbs for a product, make “Electronics” the parent breadcrumb and “Mobile Phones” the child. This way, users can see Home > Electronics > Mobile Phones.

Table of Contents

• Customization and Best Practices
• Advanced Details
• How to create a breadcrumb
• Detailed View Linkage

Customization and Best Practices

• Choose Readable Names: Keep breadcrumb names short and relevant.
• Limit Levels: Too many breadcrumb levels can overwhelm users. Aim for 3–5 levels.
• Avoid Duplicate Names: Use unique names for each level to avoid confusion.

Example: Avoid naming two different categories “Electronics.” Instead, try “Home Electronics” and “Office Electronics” if needed.

Advanced Details

How to create a breadcrumb

1. In the top-right corner, click on Settings.

2. In the left navigation panel, choose Breadcrumbs from UX.

3. Tap on +Add New to open the breadcrumb creation page.+

4. Configure

5. Name: Give a descriptive name for your breadcrumb, like “Product Categories” for product navigation.
6. Icon: Choose an icon to represent the breadcrumb, or leave it blank for a simple text-based breadcrumb.
7. Application ID: Link the breadcrumb to the relevant application or page.

Example: If creating a breadcrumb for a library app, name it “Library Home” and link it to the main library application ID.

Detailed View Linkage

Dynamic Paths: To create breadcrumbs for detailed views, specify a dynamic path that includes an item ID. Use a path format like /detail-view/item-id/* to link to specific items.

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