Breadcrumbs Container Component

Figma

The glu-breadcrumbs component serves as a container for breadcrumb items, providing a structured and accessible navigation layout. It wraps one or more <glu-breadcrumb> components inside a semantic <nav> element with proper ARIA attributes.

---

Basic Usage

Example 1: Simple Breadcrumb Navigation

HTML

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</glu-breadcrumbs>

React

Result

Loading...

Live Editor

import { GluBreadcrumbs, GluBreadcrumb } from '@gelato-ui/react'

function BreadcrumbsExample() {
  return (
    <GluBreadcrumbs>
      <GluBreadcrumb href="/home">Home</GluBreadcrumb>
      <GluBreadcrumb href="/library">Library</GluBreadcrumb>
      <GluBreadcrumb>Data</GluBreadcrumb>
    </GluBreadcrumbs>
  );
}

Vue

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</glu-breadcrumbs>

<script setup>
import { GluBreadcrumbs, GluBreadcrumb } from '@gelato-ui/vue'
</script>

Angular

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">Home</glu-breadcrumb>
  <glu-breadcrumb href="/library">Library</glu-breadcrumb>
  <glu-breadcrumb>Data</glu-breadcrumb>
</glu-breadcrumbs>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumbs } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumbs],
  template: `
    <glu-breadcrumbs>
      <glu-breadcrumb href="/home">Home</glu-breadcrumb>
      <glu-breadcrumb href="/library">Library</glu-breadcrumb>
      <glu-breadcrumb>Data</glu-breadcrumb>
    </glu-breadcrumbs>
  `
})
export class BreadcrumbsExampleComponent {}

---

Custom Separators

You can customize the separator between breadcrumb items by using the separator slot in the <glu-breadcrumb> component. In the examples below, a custom separator (a forward slash /) is used in place of the default arrow icon.

Example 2: Breadcrumb Navigation with Custom Separators

HTML

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">
    Home
    <span slot="separator">/</span>
  </glu-breadcrumb>
  <glu-breadcrumb href="/library">
    Library
    <span slot="separator">/</span>
  </glu-breadcrumb>
  <glu-breadcrumb>
    Data
  </glu-breadcrumb>
</glu-breadcrumbs>

React

Result

Loading...

Live Editor

import { GluBreadcrumbs, GluBreadcrumb } from '@gelato-ui/react'

function CustomSeparatorBreadcrumbs() {
  return (
    <GluBreadcrumbs>
      <GluBreadcrumb href="/home">
        Home
        <span slot="separator">/</span>
      </GluBreadcrumb>
      <GluBreadcrumb href="/library">
        Library
        <span slot="separator">/</span>
      </GluBreadcrumb>
      <GluBreadcrumb>
        Data
      </GluBreadcrumb>
    </GluBreadcrumbs>
  );
}

Vue

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">
    Home
    <template #separator>/</template>
  </glu-breadcrumb>
  <glu-breadcrumb href="/library">
    Library
    <template #separator>/</template>
  </glu-breadcrumb>
  <glu-breadcrumb>
    Data
  </glu-breadcrumb>
</glu-breadcrumbs>

<script setup>
import { GluBreadcrumbs, GluBreadcrumb } from '@gelato-ui/vue'
</script>

Angular

Result

Loading...

Live Editor

<glu-breadcrumbs>
  <glu-breadcrumb href="/home">
    Home
    <span slot="separator">/</span>
  </glu-breadcrumb>
  <glu-breadcrumb href="/library">
    Library
    <span slot="separator">/</span>
  </glu-breadcrumb>
  <glu-breadcrumb>
    Data
  </glu-breadcrumb>
</glu-breadcrumbs>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluBreadcrumbs } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluBreadcrumbs],
  template: `
    <glu-breadcrumbs>
      <glu-breadcrumb href="/home">
        Home
        <span slot="separator">/</span>
      </glu-breadcrumb>
      <glu-breadcrumb href="/library">
        Library
        <span slot="separator">/</span>
      </glu-breadcrumb>
      <glu-breadcrumb>
        Data
      </glu-breadcrumb>
    </glu-breadcrumbs>
  `
})
export class CustomSeparatorBreadcrumbsComponent {}

---

Slots

Slot	Description
	The default slot for breadcrumb items. Typically, this should contain one or more <glu-breadcrumb> components.

---

Built with StencilJS