Bauhaus Design System

Breadcrumb ​

Molecule

A navigational component used to display a hierarchical path of the user’s current location within an interface. They help users understand their position in relation to the broader structure of a product’s information architecture, and allow users to move up or down levels within the site or application. Breadcrumbs are typically placed at the top of a page or content area, ensuring users can easily locate and traverse to previously visited pages or higher-level sections. They are especially useful in complex interfaces or multi-level navigational structures.

Playground

Crumb 1
Crumb 2
Crumb 3
Crumb 4
  • /
  • /
    ...
  • / 
        
          

            <
            Breadcrumb

            






            

                crumbs
              
                =
                "[
  {
    "name": "Home",
    "path": "",
    "icon": "home",
    "disabled": false
  },
  {
    "name": "Projects",
    "path": "",
    "icon": "layer",
    "disabled": false
  },
  {
    "name": "Something",
    "path": "",
    "icon": "layer",
    "disabled": false
  },
  {
    "name": "Infrastructure",
    "path": "",
    "icon": "folder",
    "disabled": false
  }
]"
              


                maxVisibleCrumbs
              
                =
                "3"
              


                v-model
              
                =
                "undefined"
              


                v-model:name
              
                =
                "undefined"
              





  />

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

ts
const pathModelValue = defineModel<string>({ required: false });
const nameModelValue = defineModel<string>('name', { required: false });

Properties ​

ts
export interface BreadcrumbProps extends ElementProps {
  crumbs: BreadcrumbLink[];
  maxVisibleCrumbs?: 2 | 3 | 4 | 5 | 6;
}

export interface BreadcrumbLink extends Omit<LinkProps<'secondary'>, 'type' | 'iconRight' | 'text' | 'size'> {
  name: string;
  path?: string;
}
ts
export type LinkType = 'primary' | 'secondary' | 'tertiary';

export type LinkProps<T extends LinkType = LinkType> =
  & ElementProps
  & {
    to?: string;
    text?: string | number;
    icon?: IconName;
    iconRight?: boolean;
    disabled?: boolean;
    target?: '_blank' | '_self' | '_parent' | '_top';
    type?: T;
    size?: T extends 'tertiary'
    ? 'default'
    : 'default' | 'tiny';
  }

Emits ​

ts
const emits = defineEmits<{
  change: [crumb: BreadcrumbLink];
}>();

Anatomy ​

  1. Links – each breadcrumb item is a nested Link Secondary representing a navigable section of the site or product. By default, they display the name of the corresponding page or section. Clicking a breadcrumb item takes the user to that location.
  2. Icon - nested in Link. In Breadcrumbs we only use the Leading position for the icon.
  3. Separators – visual elements (slashes) placed between Breadcrumb items. They help the user distinguish individual items at a glance. They are not clickable.
  4. Ellipsis – a clickable element represented by three dots (…) that appears when there is not enough space to display all breadcrumb items. Clicking the ellipsis reveals truncated sections; other sections may be hidden in turn.
  5. Final breadcrumb – representing the current page or section. It uses a darker colour token, and pointer events are disabled because the user is already on that page.


States
  • Inherited from Link component.
Variants
Number
  • Show up to 6 Breadcrumbs.
Type
  • Each Breadcrumb can be set to Default, Truncated or End (no slash).
Icon Leading
  • Each breadcrumb item can be displayed as text only, or with a leading icon inherited from the Link component.