{"id":17605565,"url":"https://github.com/OuterlimitsTech/olt-ngx-breadcrumbs","last_synced_at":"2025-03-09T03:31:35.419Z","repository":{"id":257822331,"uuid":"870906712","full_name":"OuterlimitsTech/olt-ngx-breadcrumbs","owner":"OuterlimitsTech","description":"Angular Library for generating breadcrumbs based on the routing state.","archived":false,"fork":false,"pushed_at":"2024-10-11T13:11:30.000Z","size":260,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T12:20:05.054Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OuterlimitsTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-10T22:14:07.000Z","updated_at":"2024-10-15T02:54:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"172837a5-7196-49f2-8235-1f11b08fb8d3","html_url":"https://github.com/OuterlimitsTech/olt-ngx-breadcrumbs","commit_stats":null,"previous_names":["outerlimitstech/olt-ngx-breadcrumbs"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OuterlimitsTech%2Folt-ngx-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OuterlimitsTech","download_url":"https://codeload.github.com/OuterlimitsTech/olt-ngx-breadcrumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242640885,"owners_count":20162051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T15:01:15.118Z","updated_at":"2025-03-09T03:31:35.411Z","avatar_url":"https://github.com/OuterlimitsTech.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Router"],"readme":"\u003cimg src=\"https://user-images.githubusercontent.com/1365728/127748628-47575d74-a2fb-4539-a31e-74d8b435fc21.png\" width=\"30%\" \u003e\n\n# @outerlimitstech/ngx-breadcrumbs\n\nAngular Library for generating breadcrumbs based on the routing state.\n\nThis package is a modified fork of original [@exalif/ngx-breadcrumbs](https://github.com/exalif/angular-libs)\n\n_(The old component was lib-breadcrumbs)_\n\n\n\n## Standalone Usage\n```typescript\nimport { BreadcrumbsComponent } from '@outerlimitstech/ngx-breadcrumbs';\n\n@Component({\n  standalone: true,\n  imports: [BreadcrumbsComponent, RouterModule],\n  template: `\n  \u003cheader class=\"fixed-top\"\u003e    \n    \u003cdiv  class=\"p-1 d-none d-md-block bg-primary-subtle bg-gradient\"\u003e\n      \u003colt-ngx-breadcrumbs /\u003e\n    \u003c/div\u003e\n  \u003c/header\u003e\n  \u003cdiv class=\"app-content\"\u003e\n    \u003cdiv\u003e\n      \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    \u003c/div\u003e  \n  \u003c/div\u003e  \n  `,\n  styleUrl: './layout.page.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LayoutComponent  {\n}\n```\n\n## Using Html Template\n```html\n\u003cheader class=\"fixed-top\"\u003e  \n  \u003cdiv class=\"p-1 d-none d-md-block\"\u003e\n    \u003colt-ngx-breadcrumbs /\u003e\n  \u003c/div\u003e\n\u003c/header\u003e\n\u003cdiv\u003e\n  \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e \n```\n\n## Module Import/Export\n```typescript\nimport { BreadcrumbsComponent } from '@outerlimitstech/ngx-breadcrumbs';\n\n@NgModule({\n  declarations: [],\n  imports: [\n    BreadcrumbsComponent\n  ],\n  exports: [\n    BreadcrumbsComponent\n  ]\nexport class SharedModule { }  \n```\n\n\n## Example scss\n```scss\n\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n\n\n// scss-docs-start breadcrumb-variables\n$breadcrumb-font-size: 12px !default;\n$breadcrumb-padding-y: 5px !default;\n$breadcrumb-padding-x: 10px !default;\n$breadcrumb-item-padding-x: 0.5rem !default;\n$breadcrumb-margin-bottom: 1rem !default;\n$breadcrumb-bg: $gray-400 !default;\n$breadcrumb-divider-color: $gray-600 !default;\n$breadcrumb-active-color: $gray-600 !default;\n$breadcrumb-item-active-color: $gray-500 !default;\n$breadcrumb-divider: quote(\"/\") !default;\n$breadcrumb-divider-flipped: $breadcrumb-divider !default;\n$breadcrumb-border-radius: 15px !default;\n// scss-docs-end breadcrumb-variables\n\n\n.breadcrumbs__container {\n  display: flex;\n  flex-wrap: wrap;\n  padding: $breadcrumb-padding-y $breadcrumb-padding-x;\n  margin-bottom: $breadcrumb-margin-bottom;\n  list-style: none;\n  background-color: $breadcrumb-bg;\n}\n\n.breadcrumbs__item {\n  // The separator between breadcrumbs (by default, a forward-slash: \"/\")\n  + .breadcrumbs__item {\n    padding-left: $breadcrumb-item-padding-x;\n\n    \u0026::before {\n      float: left; // Suppress inline spacings and underlining of the separator\n      padding-right: $breadcrumb-padding-x;\n      color: $breadcrumb-divider-color;\n      content: $breadcrumb-divider;\n    }    \n  }\n\n  a {\n    text-decoration: none;\n    color: $gray-800;\n\n    \u0026:hover {\n      text-decoration: underline;\n    }\n  }\n\n  \u0026.active {\n    color: $breadcrumb-item-active-color;\n    font-weight: bolder;\n  }\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOuterlimitsTech%2Folt-ngx-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOuterlimitsTech%2Folt-ngx-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOuterlimitsTech%2Folt-ngx-breadcrumbs/lists"}