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.
Two directives shape what a trail renders. kbqBreadcrumbView replaces the content of a single item, and kbqBreadcrumbsSeparator replaces the separator of the whole trail.
max caps how many items the trail shows at once; the rest collapse into a dropdown behind an expand button. The button takes one of the slots, so [max]="4" renders three items plus the button. [max]="null" removes the cap and leaves the collapsing to the available width alone.
Give every kbq-breadcrumb-item a routerLink: the dropdown rebuilds the collapsed items from text and routerLink, so an item without a destination becomes a row that leads nowhere.
disabled turns the whole trail read-only: every item and the expand button stop navigating and leave the tab order.
@Component({ template: ` <nav kbq-breadcrumbs [disabled]="isReadOnly" >... </nav> ` })
Individual items have their own disabled input, which does the same for one item only.
Breadcrumb items can have names of varying lengths.
The modes below are recipes rather than component inputs: each one is a block of CSS the consuming application applies to the rendered items, and the examples carry it in their own styles. Copy the styles along with the markup.
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.
The trail is a navigation landmark. On <kbq-breadcrumbs> the navigation role is written for you; <nav kbq-breadcrumbs> carries it already.
Its accessible name comes from the active locale. Whenever a page renders more than one trail, name them apart with aria-label so assistive technology can tell which is which:
<nav kbq-breadcrumbs aria-label="Section navigation">...</nav>The default separator is hidden from assistive technology, so the punctuation between items is not read out. A separator supplied through kbqBreadcrumbsSeparator has to do the same:
<ng-template kbqBreadcrumbsSeparator> <span aria-hidden="true">→</span> </ng-template>
The last item of a trail is marked aria-current="page". A trail that does not end at the current page — a detail view reached from a list, for example — can mark the current item itself with the current input.
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 focusable navigation item. The item of the current page is not focusable, so the focus lands on the one before it. |