Components
Breadcrumb
Breadcrumbs are a helpful navigation feature that allows users to move up in a hierarchy.
Code examples
<Breadcrumb> <BreadcrumbLink href="/">Hjem</BreadcrumbLink> <BreadcrumbLink href="/components">Komponenter</BreadcrumbLink> <BreadcrumbCurrentLink>Breadcrumb</BreadcrumbCurrentLink> </Breadcrumb>
Guidelines
Breadcrumbs are a useful navigation tool on pages that are based on deep information hierarchies.
Keep in mind:
- They should always be located near the top of the page, just below the header.
- The last element in the breadcrumb should be the current page that the user is on.
- Use breadcrumbs to show users where they are within the site structure. Do not use breadcrumbs to represent steps in a workflow or form - use a stepper instead.
Code
<Breadcrumb />
import { Breadcrumb } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Pass a list of BreadcrumbItem components | |
variant | "core" | "ghost" | Defaults to "core" |
<BreadcrumbItem />
import { BreadcrumbItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Contains a `BreadcrumbLink` | |
isCurrentPage | boolean | Set to true on the last part of the breadcrumb path |
<BreadcrumbLink />
import { BreadcrumbLink } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
href | string | ||
as | Link | "a" | Default "a". Pass a Link component if you want internal links |