Skip to content

feat(ui): Add Vercel-style breadcrumb navigation with project and service switchers#3716

Open
imran-vz wants to merge 7 commits intoDokploy:canaryfrom
imran-vz:feat/quick-service-switcher
Open

feat(ui): Add Vercel-style breadcrumb navigation with project and service switchers#3716
imran-vz wants to merge 7 commits intoDokploy:canaryfrom
imran-vz:feat/quick-service-switcher

Conversation

@imran-vz
Copy link
Contributor

@imran-vz imran-vz commented Feb 16, 2026

What is this PR about?

Created AdvanceBreadcrumb component with searchable dropdowns with project, environment and service selectors for quick switching between services and replaced BreadcrumbSidebar with new component across all service pages.

Also ran, pnpm run format-and-lint:fix for formatting and linting.

The bulk of this change is just formatting and linting. the actual feature is contained to these file

apps/
└── dokploy/
    ├── components/
    │   ├── dashboard/
    │   │   └── projects/
    │   │       └── show.tsx
    │   └── shared/
    │       └── advance-breadcrumb.tsx
    │
    └── pages/
        └── dashboard/
            └── project/
                └── [projectId]/
                    └── environment/
                        └── [environmentId]/
                            ├── index.tsx
                            └── services/
                                ├── application/
                                │   └── [applicationId].tsx
                                ├── compose/
                                │   └── [composeId].tsx
                                ├── mariadb/
                                │   └── [mariadbId].tsx
                                ├── mongo/
                                │   └── [mongoId].tsx
                                ├── mysql/
                                │   └── [mysqlId].tsx
                                ├── postgres/
                                │   └── [postgresId].tsx
                                └── redis/
                                    └── [redisId].tsx

Checklist

Before submitting this PR, please make sure that:

  • You created a dedicated branch based on the canary branch.
  • You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
  • You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

NA

Screenshots (if applicable)

cursorful-video-1771228165230.mp4

Greptile Summary

This PR introduces a Vercel-style breadcrumb navigation component with searchable dropdowns for quick switching between projects, environments, and services. The new AdvanceBreadcrumb component replaces the previous BreadcrumbSidebar across all service pages (applications, databases), providing an enhanced navigation experience with project/environment/service selectors. The remaining changes are primarily code formatting improvements (import reordering) and cleanup of an unused import in the redis schema.

Confidence Score: 4/5

  • This PR is safe to merge with minor considerations
  • The implementation is well-structured with proper TypeScript types and consistent integration across all service pages. The component uses standard React patterns and Next.js router. Most file changes are formatting-related (import ordering). However, the component doesn't handle potential edge cases like missing data gracefully in a few places, and there's no error boundary for API failures.
  • Check advance-breadcrumb.tsx:199-213 for potential null reference when project environments are empty

Last reviewed commit: 6037a3b

(2/5) Greptile learns from your feedback when you react with thumbs up/down!

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

33 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

switchers

- Create AdvanceBreadcrumb component with searchable dropdowns
- Add project selector with environment expansion support
- Add service selector for quick switching between services
- Add environment selector badge for multi-environment projects
- Replace BreadcrumbSidebar with new component across all service pages
- Update projects page, environment page, and all service detail pages
  (application, compose, postgres, mysql, mariadb, redis, mongo)
@imran-vz imran-vz force-pushed the feat/quick-service-switcher branch from 6037a3b to ebbbd39 Compare February 16, 2026 08:03
@190km
Copy link

190km commented Feb 18, 2026

fireeee nice !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants