import { KbqBreadcrumbsModule } from '@koobiq/components/breadcrumbs';Selector: [rdxRovingFocusGroup]
| Name | Description |
|---|---|
@Input() dir: InputSignal |
|
@Input() loop: InputSignalWithTransform |
|
@Input() orientation: Orientation
|
|
@Input() preventScrollOnEntryFocus: InputSignalWithTransform |
|
@Output('currentTabStopIdChange')
currentTabStopIdChange: OutputEmitterRef |
|
@Output('entryFocus')
entryFocus: OutputEmitterRef |
Selector: [rdxRovingFocusItem]
| Name | Description |
|---|---|
@Input() active: InputSignalWithTransform |
|
@Input() allowShiftKey: InputSignalWithTransform |
|
@Input() focusable: InputSignalWithTransform |
|
@Input() tabStopId: InputSignal |
|
| parent: RdxRovingFocusGroupDirective |
Selector: ng-template[kbqBreadcrumbsSeparator]
| Name | Description |
|---|---|
| templateRef: TemplateRef |
Directive to style and configure buttons used as breadcrumb items. - Inherits focus management behavior from `RdxRovingFocusItemDirective`. - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
Selector: [kbq-button][kbqBreadcrumb]
Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
Selector: [kbqBreadcrumbView]
| Name | Description |
|---|---|
| templateRef: TemplateRef |
Component represents an individual breadcrumb item with optional support for router navigation and styling.
Selector: kbq-breadcrumb-item
| Name | Description |
|---|---|
@Input() current: InputSignalWithTransform |
Indicates whether the breadcrumb item is the current/active item. Defaults to `false`. |
@Input() disabled: InputSignalWithTransform |
Indicates whether the breadcrumb item is disabled. |
@Input() text: InputSignal |
The text displayed for the breadcrumb item. This text will be shown if breadcrumb item is hidden in dropdown. |
| customTemplateRef: Signal |
A reference to a custom template provided for the breadcrumb item content. The template can be used to override the default appearance of the breadcrumb. |
| routerLink: RouterLink | An optional `RouterLink` instance for navigating to a specific route. Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown. |
Selector: kbq-breadcrumbs,[kbq-breadcrumbs]
| Name | Description |
|---|---|
@Input() disabled: InputSignalWithTransform |
Indicates whether the breadcrumbs are disabled. When disabled, user interactions are blocked. |
@Input() firstItemNegativeMargin: InputSignalWithTransform |
Determines if a negative margin should be applied to the first breadcrumb item. |
@Input() max: InputSignal |
Maximum number of visible breadcrumb items. Remaining items are collapsed into a dropdown if the total exceeds this value. Default value is taken from the global configuration. |
@Input() size: InputSignal |
Size of the breadcrumbs. Affects font size. Default value is taken from the global configuration. |
@Input() wrapMode: InputSignal |
Wrapping behavior of the breadcrumb items. |
| KbqButtonStyles: typeof KbqButtonStyles | |
| KbqComponentColors: typeof KbqComponentColors | |
| PopUpPlacements: typeof PopUpPlacements | |
| configuration: KbqBreadcrumbsConfiguration | |
| hiddenItemIDs: Signal |
|
| items: Signal |
|
| minVisibleItems: 2 | Ensures at least minimum number of breadcrumb items are shown. |
| separator: TemplateRef |
type KbqBreadcrumbsWrapMode = 'auto' | 'wrap' | 'none';
type KbqBreadcrumbsConfiguration = {
/**
* Specifies the maximum number of breadcrumb items to display.
* - If a number is provided, only that many items will be shown.
* - If `null`, no limit is applied, and all breadcrumb items are displayed.
*/
max: number | null;
size: KbqDefaultSizes;
/**
* Determines if a negative margin should be applied to the first breadcrumb item.
*/
firstItemNegativeMargin: boolean;
/**
* Manages breadcrumb items when space is limited:
* - `auto`: Adjusts based on space and item count.
* - `wrap`: Moves items to the next line if needed.
* - `none`: Prevents wrapping, allowing overflow.
*/
wrapMode: KbqBreadcrumbsWrapMode;
};
Breadcrumbs options global configuration provider.
const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`.
const kbqBreadcrumbsConfigurationProvider: (configuration: Partial<KbqBreadcrumbsConfiguration>) => Provider;