Skip to main content

Breadcrumb Navigation (BN01)

Breadcrumb Navigation Implementation in SMART360

Summary:
Implement breadcrumb navigation across Smart360 to improve user experience and provide clear navigation context. Breadcrumbs will reflect the user’s location within a module, including side menu pages, tabs, and detail views.

Description:
Smart360 has:

  • Top Menu (Core Navigation): Used to switch between modules (Consumers, Meters, Billing, Service Orders, Assets, Communication, Reporting, Setup).
  • Side Menu (Module Navigation): Used to move between pages inside a module (e.g., Accounts, Payments, Complaints, Services).

Breadcrumbs should:

  • Always start with the active side menu item (not Home).
  • Show the page journey inside that section (list → entity → action).
  • Complement side menu navigation by showing the current position, with quick backtracking.
  • Breadcrumbs reset whenever a user switches to another module via the bento menu.

✅

Universal Breadcrumb Rules

  1. First Item = Active Side Menu Page
    • Example: If user is on “Accounts” section of Consumer Module → breadcrumb starts with Accounts.
  2. Page Levels
    • List Page → {Side Menu Item}
      • Example: Accounts
    • View Page (Details) → {Side Menu Item} > {Entity Name/ID}
      • Example: Accounts > Account #12345
    • Edit Page → {Side Menu Item} > {Entity Name/ID} > Edit
      • Example: Accounts > Account #12345 > Edit
    • Add Page → {Side Menu Item} > Add
      • Example: Accounts > Add Account
    • Sub-section Page (History, Payments, Reports, etc.) → {Side Menu Item} > {Entity Name/ID} > {Sub-Section}
      • Example: Accounts > Account #12345 > Service History
  3. Clickability
    • All items except the last are clickable.
    • Example:
      • Accounts → goes to Accounts List
      • Account #12345 → goes to Account Details
      • Edit → current page (non-clickable)
  4. Consistency
    • Same breadcrumb logic applies to all modules:
      • Consumers
      • Meters
      • Billing
      • Service Orders
      • Assets
      • Communication
      • Reporting
      • Utility Setup / Settings
  5. Edge Cases
    • If user enters a page via deep link, breadcrumb should still generate correctly.
    • Popup/Modal pages (like quick edit, confirmation popups) → No breadcrumbs shown.
    • For reports or filtered views, breadcrumb should adapt (e.g., Accounts > Search Results).
  6. UI/UX
    • Font: Poppins (Smart360 design system).
    • Separator: >
    • Responsive: Collapse with ... for long paths.
    • Hover: interactive for clickable items.
  7. Tabs Handling:
    • For pages with tabs (e.g., Service Request → Current / History):
      • Example: Service Orders → Current Requests
      • Breadcrumb shows the tab name as the next level.
    • If inside a detail view within a tab, append the detail level.
      • Example: Service Orders → Current Requests → Request Details

📌

Example Walkthroughs

Consumer Module (side menu sample: Accounts, Payments, Complaints)
  • Accounts → list
  • Accounts > Account #12345 → view details
  • Accounts > Account #12345 > Edit → edit page
  • Accounts > Add Account → add page
  • Complaints > Complaint #CMP01 > Edit → edit complaint

Service Orders Module
  • Service Orders → list
  • Service Orders > Order #SO12345 → details
  • Service Orders > Order #SO12345 > Tasks → sub-section
  • Service Orders > Add Service Order → add page

Billing Module
  • Payments → list
  • Payments > Payment #P001 → details
  • Payments > Payment #P001 > Edit → edit page
  • Payments > Add Payment → add page
Back to top