Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group New Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.6.0
Breadcrumbs 
import { KbqBreadcrumbsModule } from '@koobiq/components/breadcrumbs';
Directives
RdxRovingFocusGroupDirective

Selector: [rdxRovingFocusGroup]

Properties
Name Description
@Input()
dir: Direction
@Input()
loop: boolean
@Input()
orientation: Orientation
@Input()
preventScrollOnEntryFocus: boolean
@Output('currentTabStopIdChange')
currentTabStopIdChange: EventEmitter
@Output('entryFocus')
entryFocus: EventEmitter
RdxRovingFocusItemDirective

Selector: [rdxRovingFocusItem]

Properties
Name Description
@Input()
active: boolean
@Input()
allowShiftKey: boolean
@Input()
focusable: boolean
@Input()
tabStopId: string
parent: RdxRovingFocusGroupDirective
KbqBreadcrumbsSeparator

Selector: ng-template[kbqBreadcrumbsSeparator]

Properties
Name Description
templateRef: TemplateRef
KbqBreadcrumbButton

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]

KbqBreadcrumbView

Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef

Selector: [kbqBreadcrumbView]

Properties
Name Description
templateRef: TemplateRef
KbqBreadcrumbItem

Component represents an individual breadcrumb item with optional support for router navigation and styling.

Selector: kbq-breadcrumb-item

Properties
Name Description
@Input()
current: boolean 		Indicates whether the breadcrumb item is the current/active item. Defaults to `false`.
@Input()
disabled: boolean 		Indicates whether the breadcrumb item is disabled.
@Input()
text: string 		The text displayed for the breadcrumb item. This text will be shown if breadcrumb item is hidden in dropdown.
customTemplateRef: TemplateRef 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.
KbqBreadcrumbs

Selector: kbq-breadcrumbs,[kbq-breadcrumbs]

Properties
Name Description
@Input()
disabled: boolean 		Indicates whether the breadcrumbs are disabled. When disabled, user interactions are blocked.
@Input()
firstItemNegativeMargin: boolean 		Determines if a negative margin should be applied to the first breadcrumb item.
@Input()
max: number 		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: KbqDefaultSizes 		Size of the breadcrumbs. Affects font size. Default value is taken from the global configuration.
@Input()
wrapMode: KbqBreadcrumbsWrapMode 		Wrapping behavior of the breadcrumb items.
KbqButtonStyles: typeof KbqButtonStyles
KbqComponentColors: typeof KbqComponentColors
PopUpPlacements: typeof PopUpPlacements
configuration: KbqBreadcrumbsConfiguration
items: QueryList
minVisibleItems: 2 Ensures at least minimum number of breadcrumb items are shown.
separator: TemplateRef
Type aliases
KbqBreadcrumbsWrapMode 
type KbqBreadcrumbsWrapMode = 'auto' | 'wrap' | 'none';
KbqBreadcrumbsConfiguration 
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;
};
Constants
KBQ_BREADCRUMBS_CONFIGURATION

Breadcrumbs options global configuration provider.

const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
kbqBreadcrumbsConfigurationProvider

Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`.

const kbqBreadcrumbsConfigurationProvider: (configuration: Partial<KbqBreadcrumbsConfiguration>) => Provider;
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.