Skip to content

Implement breadcrumb navigation #14938

@carolromero

Description

@carolromero

Is your feature request related to a problem?

Currently, Decidim lacks a clear and consistent breadcrumb system. The existing header combines navigation and breadcrumbs in a single mega-menu, which creates confusion about the user’s current location and makes it harder to understand the structure of the site. Without a proper breadcrumb, users lose context and must rely on the browser back button or top navigation to go back, which can be inefficient and disorienting.

Describe the solution you'd like

Implement a dedicated breadcrumb navigation system with the following behavior:

On desktop:

  • The full breadcrumb is displayed directly below the main header.
  • It reflects the full hierarchical structure: Organization > Space (e.g., Process or Assembly) > Component > Resource (e.g., proposal, meeting).
  • Each item is clickable and allows users to go back to that level.
Image

On mobile:

  • A compact breadcrumb is shown, displaying only the immediately previous item in the navigation hierarchy.
  • Tapping this item takes the user back to the previous level (e.g., from proposal to component, from component to process).
Image

Mock-ups / Prototype
Figma file

Additional context

This issue is part of a larger effort to remove the legacy mega-menu and improve header clarity by decoupling global navigation and breadcrumbs.

Does this issue impact users' private data?

No, it does not involve processing personal data.

Acceptance Criteria

  • Given I am on desktop, when I navigate through a participatory space, then I see a breadcrumb showing the full path from the homepage to the current page.
  • Given I click on any item in the breadcrumb on desktop, then I am redirected to that corresponding level.
  • Given I am on mobile, when I navigate through a participatory space, then I see a compact breadcrumb showing only the immediate previous level.
  • Given I tap the compact breadcrumb on mobile, then I am redirected to the previous level in the hierarchy.
  • Given I navigate to a specific resource (e.g., proposal), then the breadcrumb updates dynamically to reflect the correct structure.
  • The breadcrumb navigation is responsive and consistently styled across the platform.

Metadata

Metadata

Projects

Status

Merged

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions