Skip to content

Conversation

Ibrahim-Haizel
Copy link
Contributor

@Ibrahim-Haizel Ibrahim-Haizel commented Mar 10, 2025

This pull request introduces a new Breadcrumbs component to the project, along with necessary integrations and examples. The component automatically generates breadcrumb navigation based on the current route and supports customisation. Key changes include the implementation of the Breadcrumbs component, integration into the layout, and addition of examples for usage.

Implementation of Breadcrumbs Component:

  • src/lib/components/ui/Breadcrumbs.svelte: Added a new Breadcrumbs component that generates breadcrumbs based on the current route and supports customization options such as collapsing on mobile and inverse color scheme.

Key implementation features

  • Automatically detects valid routes using Vite's glob imports to scan for +page.svelte files
  • Generates breadcrumbs dynamically based on the current route
  • Supports custom titles through module context exports (pageTitle and getPageTitle)
  • Remains flexible by still allowing manual override through the items prop

This approach is used by libraries like svelte-breadcrumbs

Integration into Layout:

  • src/routes/+layout.svelte: Integrated the Breadcrumbs component into the main layout to display breadcrumb navigation across the application to test it is working correctly. [1] [2]

Addition of Examples:

…t-in binding functionality

Replaced selectedValue with value state variable where selectedValue is a prop assigned to the value as the state
Removed isChecked derived state and toggleRadio function
Added bind:group={value} to the radio inputs
Updated conditional visibility check to use value !== option.value
Updated aria-checked attribute to use the new value variable
…nd dynamic title support. Intergratted logic directly in breadcrumbs component instead of using a wrapper.
@Ibrahim-Haizel Ibrahim-Haizel changed the base branch from add-bind-to-selected-value-radios-and-checkbox to main March 10, 2025 11:51
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.

1 participant