Breadcrumbs

This component provides a navigation trail to show the user where they have been and are currently

Basic Usage

import { Breadcrumbs, BreadcrumbsLink } from '@krakentech/coral';
 
<Breadcrumbs>
    <BreadcrumbsLink href="#">Previous page</BreadcrumbsLink>
    <BreadcrumbsLink current>Current page</BreadcrumbsLink>
</Breadcrumbs>

Multi-level

<Breadcrumbs>
    <BreadcrumbsLink href="#">Previous page</BreadcrumbsLink>
    <BreadcrumbsLink href="#">Previous page</BreadcrumbsLink>
    <BreadcrumbsLink href="#">Previous page title that runs on a bit</BreadcrumbsLink>
    <BreadcrumbsLink href="#">Previous page title that runs on a bit</BreadcrumbsLink>
    <BreadcrumbsLink href="#">Previous page title that runs on a bit</BreadcrumbsLink>
    <BreadcrumbsLink current>Current page</BreadcrumbsLink>
</Breadcrumbs>

Design

Good to know

The breadcrumb organism consists of a series of clickable links and static labels, each link representing a higher-level section or category within the website. Choose to use the breadcrumb organism when the area of your site has multiple levels the user can reach. By clicking on one of the links users can quickly jump to a previous level and navigate directly to a specific section.

What if I need more that 4 levels?

Similar to our stepper used during our domestic onboarding journey we like to keep things both simple and as transparent as possible for our users, for this reason its important that our pages don’t go more than 4 levels deep if we can help it, otherwise we’d be burying information and making it harder for the user to access, which isn’t very Octopus.

Component breakdown

• Text: Heading 6 & Caption text
• Resting colour: Purple Haze
• Hover colour: Blue Tang
• Current colour: Ice