Breadcrumbs

Overview

Complex applications often allow users to drill down from more general views into increasingly more detailed views. As the user drills downward through the hierarchy of views, they can quickly lose track of where they are in the process and may find it difficult to return to a higher level in the hierarchy of views.

Because of this, we want to ensure two things:

• The user understands where they are in the hierarchy of views.
• The user can quickly return to higher levels in the hierarchy of views.

Breadcrumbs are a great way to accomplish both of these goals without requiring much space in your view.

We support two types of breadcrumbs:

• Simple breadcrumbs perform an action when clicked, typically a navigation back up to a higher level in the navigation tree. Most breadcrumbs are the simple variety.
• Dropdown breadcrumbs display a dropdown menu when clicked. Each item in the dropdown menu perform an action when clicked, typically a navigation over to an adjacent level in the navigation tree.

Breadcrumbs at the Function View Level

Breadcrumbs are a horizontal list of links displayed at the top of the view, above the function title. Breadcrumbs include a segment for each level in a hierarchy of views. This hierarchy may start at the root of your application’s tree of views, or it may reflect only a local hub. The segments indicate the hierarchy from left-to-right, with more general views on the left and more specific views on the right. Each segment is separated by a delimiter character.

Every breadcrumb segment is a link to a higher level in the hierarchy. This helps the user to quickly jump back to higher levels in the hierarchy of views. The function title identifies the current view, which is the lowest level of the hierarchy. The title is not a link. It helps the user understand where they are in the overall process.

Breadcrumbs are not a replacement for your app’s primary navigation.

If there are multiple paths through your app’s navigation tree down to the current page, the breadcrumbs should only display one path down to this page, regardless of how the user navigated here.

Breadcrumbs display a static link to the current location in your app’s hierarchical structure, not the user’s browsing history.

Do not use breadcrumbs in parts of your application where there is no hierarchy, since there is nothing to link back to in these sections.

On mobile devices, avoid wrapping in your breadcrumbs since this uses up valuable vertical space at the top of the view. If you notice wrapping, try shortening the text of individual breadcrumb segments or reduce the depth of the breadcrumbs to only a couple of levels up from the current view. This is not as much of a concern for larger screen widths since there is generally more room for the breadcrumbs to spread out.

Breadcrumbs at the Display Block Level

While less common, breadcrumbs are also supported within a display block. Breadcrumbs at this level don’t navigate from the current view to another view; instead, they are used for controlling navigation for local drill-down operations that take place fully within a display block. Breadcrumbs at the display block level should appear at the top of the display block, below the display block title and toolbar.

While breadcrumbs at the function view level show all levels in the hierarchy except for the last — the function title acts as the last breadcrumb — breadcrumbs at the display block level are not tied to the display block title and should include all levels of the hierarchy.

Development

Web component development

Component reference

rui-breadcrumbs

rui-breadcrumb

rui-breadcrumb-dropdown

rui-button-menu-option

rui-button-menu-separator

Implementation

Begin by importing the rui-layout module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

Breadcrumbs at the function level

For breadcrumbs at the function view level, nest instances of rui-breadcrumb within the rui-breadcrumbs tag.

Do not include the lowest level of the hierarchy for breadcrumbs at the function view level, since the function view title acts as the final breadcrumb in the hierarchy.

<rui-function-view titleText="Customer Search">

    <!-- Breadcrumbs at the function view level -->
    <rui-breadcrumbs slot="function-breadcrumbs">
        <rui-breadcrumb text="Home" route="/#/Home"></rui-breadcrumb>
    </rui-breadcrumbs>

</rui-function-view>

Breadcrumb dropdowns

Most breadcrumbs perform a simple navigation when clicked. But breadcrumbs that link from one “spoke” to another in drill-down navigation scenarios display a dropdown menu of all available sibling spoke navigation options when clicked.

<rui-breadcrumbs slot="function-breadcrumbs">

    <rui-breadcrumb text="Home" route="/#/Home"></rui-breadcrumb>
    
    <rui-breadcrumb-dropdown text="Breadcrumb Dropdown">
        <rui-button-menu-option text="Buttons" route="/#/Buttons"></rui-button-menu-option>
        <rui-button-menu-separator></rui-button-menu-separator>
        <rui-button-menu-option text="Google" (rui-menu-option-click)="goGoogle()"></rui-button-menu-option>
        <rui-button-menu-option text="Jack Henry" (rui-menu-option-click)="goJha()"></rui-button-menu-option>
        <rui-button-menu-separator></rui-button-menu-separator>
        <rui-button-menu-option text="Disabled" isDisabled="true"></rui-button-menu-option>
    </rui-breadcrumb-dropdown>

</rui-breadcrumbs>

Angular wrapper development

Wrapper reference

jha-function-breadcrumbs

jha-breadcrumbs

jha-breadcrumb

jha-breadcrumb-dropdown

jha-breadcrumb-menu-option

jha-breadcrumb-menu-separator

Implementation

Begin by importing the JhaLayoutModule module into your application.

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

Breadcrumbs at the function level

For breadcrumbs at the function view level, nest instances of jha-breadcrumb within the jha-function-breadcrumbs tag.

Do not include the lowest level of the hierarchy for breadcrumbs at the function view level, since the function view title acts as the final breadcrumb in the hierarchy.

<jha-function-view jhaTitle="Customer Search">

    <!-- Breadcrumbs at the function view level -->
    <jha-function-breadcrumbs>
        <jha-breadcrumb jhaText="Home" jhaRouterLink="/Home"></jha-breadcrumb>
    </jha-function-breadcrumbs>

</jha-function-view>

Breadcrumb dropdowns

Most breadcrumbs perform a simple navigation when clicked. But breadcrumbs that link from one “spoke” to another in drill-down navigation scenarios display a dropdown menu of all available sibling spoke navigation options when clicked.

<jha-function-breadcrumbs>

    <jha-breadcrumb jhaText="Home" jhaRouterLink="/Home"></jha-breadcrumb>
    
    <jha-breadcrumb-dropdown jhaText="Breadcrumb Dropdown">
        <jha-breadcrumb-menu-option jhaText="Router Link" jhaRouterLink="/Home"></jha-breadcrumb-menu-option>
        <jha-breadcrumb-menu-option jhaText="External URL" jhaExternalUrl="https://www.google.com">
        </jha-breadcrumb-menu-option>
        <jha-breadcrumb-menu-separator></jha-breadcrumb-menu-separator>
        <jha-breadcrumb-menu-option jhaText="Router Link" jhaRouterLink="/Home"></jha-breadcrumb-menu-option>
    </jha-breadcrumb-dropdown>

</jha-function-breadcrumbs>

Breadcrumbs at the display block level

For the less common case of breadcrumbs at the display block level, nest instances of jha-breadcrumb within the jha-breadcrumbs tag. Position the breadcrumbs at the top of the display block, just below the title and toolbar if present.

Unlike breadcrumbs at the function view, you should include all levels of the hierarchy in the breadcrumbs, including the last level. The display block title is unrelated to breadcrumbs at the display block level.

<jha-function-view jhaTitle="Customer Search">

    <jha-display-block jhaTitle="Display Block Example">

        <!-- Breadcrumbs at the display block level -->
        <jha-breadcrumbs>
            <jha-breadcrumb *ngFor="let level of levels" jhaText="{{level.name}}" (click)="returnToLevel(level)">
            </jha-breadcrumb>
        </jha-breadcrumbs>

    </jha-display-block>

</jha-function-view>

Component playground

Design

Figma design

For breadcrumbs at the function level:

• Start by adding a function view with space for breadcrumbs.
• Drag in instances of the Breadcrumb or Breadcrumb Dropdown components as needed. Change the text for each to an appropriate value.
• For breadcrumbs at the function level, the function title itself acts as the active breadcrumb. Do not add a separate active breadcrumb at this level.
• For breadcrumbs at the function level, position the breadcrumb list 5 pixels above the function title.

For breadcrumbs at the content level:

• Add one or more inactive breadcrumbs using the Breadcrumb component.
• Add exactly one active breadcrumb to the right of all the inactive breadcrumbs.
• Vertically center the list of breadcrumbs.

Adobe XD design

For breadcrumbs at the function level:

• Start by adding a function view with space for breadcrumbs.
• Drag in instances of the Breadcrumb or Breadcrumb Dropdown components as needed. Change the text for each to an appropriate value.
• For breadcrumbs at the function level, the function title itself acts as the active breadcrumb. Do not add a separate active breadcrumb at this level.
• For breadcrumbs at the function level, position the breadcrumb list 5 pixels above the function title.

For breadcrumbs at the content level:

• Add one or more inactive breadcrumbs using the Breadcrumb component.
• Add exactly one active breadcrumb to the right of all the inactive breadcrumbs.
• Vertically center the list of breadcrumbs.