IxDF UI Kit

“Breadcrumbs” Component

Design: zeplin.

The breadcrumb is a secondary navigation component that helps people track and move across pages with a deep level of hierarchy. IxDF uses a location-based breadcrumb that shows the site’s hierarchy leading to the current page.

Breadcrumbs should be used in cases where a page has 3 or more levels of hierarchy. For instance, a lesson item page within a course has 3 levels: courses > the current course > the current lesson item. For pages with 2 or less levels, breadcrumbs are less useful.

Design

  • If a breadcrumb breaks into more than one line, make the end of the first line be the icon rather than text. This prevents the appearance that the breadcrumb has ended at one line.
  • If a breadcrumb item breaks into more than one line, truncate it to fit into one line with space for the icon.
  • The last breadcrumb item for the current page should not be linked.

Usage

@include('components.breadcrumbs', [
    'breadcrumbs' => \App\Utility\Breadcrumbs::create(
        'How to apply', [
            ['title' => 'About', 'url' => route('pages.aboutUs.index')],
            ['title' => 'Careers', 'url' => route('pages.careers.index')],
        ]
    )
])

Props

  • breadcrumbs (required)
    App\Utility\Breadcrumbs

    Object that holds all information about breadcrumbs.

Accessibility

Official W3C design pattern is used for this component.