Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Breadcrumb

Breadcrumbs are a helpful navigation feature that allows users to move up in a hierarchy.

FigmaGitHub

Examples

A simple breadcrumb

<Breadcrumb>
    <BreadcrumbLink href="/">Hjem</BreadcrumbLink>
    <BreadcrumbLink href="/components">Komponenter</BreadcrumbLink>
    <BreadcrumbCurrentLink>Breadcrumb</BreadcrumbCurrentLink>
</Breadcrumb>

Variants

<Stack>
      <Breadcrumb variant="core">
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Breadcrumb</BreadcrumbCurrentLink>
      </Breadcrumb>

      <Breadcrumb variant="ghost">
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Breadcrumb</BreadcrumbCurrentLink>
      </Breadcrumb>
</Stack>

Guidelines

Breadcrumbs are a useful navigation tool on pages that are based on deep information hierarchies.

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.

Code

<Breadcrumb />

import { Breadcrumb } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNodePass a list of BreadcrumbItem components
variant"core" | "ghost"Defaults to "core"

<BreadcrumbItem />

import { BreadcrumbItem } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNodeContains a `BreadcrumbLink`
isCurrentPagebooleanSet to true on the last part of the breadcrumb path

<BreadcrumbLink />

import { BreadcrumbLink } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode
hrefstring
asLink | "a"Default "a". Pass a Link component if you want internal links