Breadcrumbs are a navigation element that helps users easily orient themselves on a website and understand their current location relative to the main page.

Breadcrumbs come in several sizes to offer more flexibility for adapting to different interfaces.

Breadcrumb items can have names of varying lengths.
Below are the modes for configuring the display length and number of items.

A standard truncation method where the name is cut off after the first 14 characters.

Used in cases where highlighting a unique identifier at the end of the name is necessary.

For cases when it is necessary to highlight the beginning and the end of the title.

For cases where a name can be replaced with a shortened version using a well-known abbreviation. It is important that this abbreviation is already familiar to the service's user audience.

By default, the breadcrumb panel is shifted to the left by --kbq-breadcrumb-item-negative-margin using a negative margin. This behavior can be changed using the firstItemNegativeMargin property.

For specific breadcrumbs:

@Component({
    template: `
        <nav
            kbq-breadcrumbs
            [firstItemNegativeMargin]="false"
            >...
        </nav>
    `
})

For all breadcrumbs in the module, using Dependency Injection with the kbqBreadcrumbsConfigurationProvider provider:

import { kbqBreadcrumbsConfigurationProvider } from '@koobiq/components/breadcrumbs';

@NgModule({
    providers: [
        kbqBreadcrumbsConfigurationProvider({
            firstItemNegativeMargin: false
        })
    ]
})

Sometimes, the parent container of breadcrumbs may be compressed in width. In such cases, it is recommended either to use truncation and hide items or to wrap items onto a new line.

This mode allows breadcrumbs to adjust to the available space.

If it is necessary to display the breadcrumb values without truncation or hiding items, wrapping items onto a new line can be used.

Key	Behavior
Tab	Navigate to the start of the breadcrumbs: When the focus switches to breadcrumbs, the cursor automatically moves to the first item in the navigation path.
Enter \ Space	Activates the item. Navigation to a link: If the selected item corresponds to a link to another page, navigation occurs. Expand a dropdown: For items with dropdown lists, the list opens, and the focus shifts to the first item in the list. Trigger an action: If the item has an associated action (e.g., opening a modal window), the action is performed. No action: For other items, no actions occur.
Right Arrow \ Left Arrow	Move through items: Allows navigation through the breadcrumb items forward or backward. When reaching the end or start of the list, the cursor cyclically moves to the opposite end.
Bottom Arrow	Expanding a dropdown list: if the current item contains a nested list, it will be expanded.
Home	Go to start: moves the focus to the first navigation item.
End	Go to end: moves the focus to the last navigation item.